transform：translate(-50%，-50%)定位實現百分比居中

HTML代碼

<div id="translateTest"></div>

CSS代碼

#translateTest{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    background-color: blue;
  }

實現一個水平居中的藍色矩形（矩形的寬高分別爲瀏覽器的30%，30%），效果如下圖：

原理：

transform屬性

使用top:50%; left:50%;時，是以左上角爲原點定位，如下圖，是左上角的原點居中，但是元素本身並不居中。

transform：translate(-50%，-50%):向上（X軸）向左（Y軸）移動自身長寬的50%，使其位於中心。同理，需要按比例移動元素的話修改translate的值就可以做到。

注意：需要居中的元素應爲絕對定位（position: absolute;）