transform：translate(-50%，-50%)定位实现水平垂直居中

定位实现水平垂直居中原理

transform属性

利用绝对定位使元素top:50%; left:50%;时，是以左上角为原点定位，所以实现的是左上角为原点居中，因为元素自身有一定的高度和宽度，所以元素本身并不居中。
transform：translate(-50%，-50%):向上（X轴）向左（Y轴）移动自身长宽的50%，使元素位于中心。

注意：需要居中的元素应为绝对定位（position: absolute;）

代码如下：

HTML代码

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

CSS代码

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