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;）