transform - css3 translate 的水平垂直居中问题求解

Question

transform: translate(50%, 50%)

为什么能够使一个元素水平垂直居中？

Answer 1

这样写并不能使一个元素水平垂直居中，只能使元素在当前位置分别往x轴和y轴正向平移自身宽度的一半距离。

之前答过一个题，楼主可以看一下，也许有一些帮助。

translate

Answer 2

雷雷

Answer 3

这样写并不能直接居中，可以定位，然后left:50%; 这个时候定位原点是父层的定位元素，然后使用translateX(-50%)；这时候是相对于这个元素本身向左移动一半，最终效果刚好是居中的。