Css transform: translate(-50%, -50%)；使元素居中

在CSS中，transform: translate(-50%, -50%); 是一种用于移动元素的属性。

translate 是 transform 的一个功能，可以改变元素在页面上的位置，不影响其他元素的布局。它接受两个参数，第一个参数表明x轴（水平）移动的距离，第二个参数表明y轴（垂直）移动的距离。

在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。请注意，这里的移动是负方向的，所以元素实际上是向左和向上移动。

这种特定的用法（translate(-50%, -50%)）常常和 position: absolute; top: 50%; left: 50%; 一起使用，用于将元素居中。
这里的原理是， position: absolute后元素的位置在左上角 (0,0)位置,要想将元素居中显示:
在 X轴,通过 left: 50%; 使其元素的起始位置偏移到其容器的50%的位置，这时你会发现,其元素并未有居中,而是多了这个元素的宽度的一半,然后再通过 translate(-50%) 向左移动元素的一半宽度，此时就达到了居中的效果。
在Y轴同理, top:50%后,需要通过 translate(0,-50%) 向上移动元素的一半高度,才能到中心位置.

        position: absolute;   // 不占位
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);