html5 - CSS 用 position: absolute 与 transform 来居中块级元素的问题

Question

为什么

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

能起到居中的效果
这里不应该相互抵消掉了相当于没有布局么

Answer 1

画一个图应该就很清晰明了了

第一步

第二步

所以本质上理解

1.绝对定位元素的定位基准点是其有定位元素的祖先元素

1. 而translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度

图画的不太好，哈哈哈

Answer 2

top left是相对于外层第一个包含relative的元素，transform相对于自己。如果要支持很多游览器，不要忘记给transform加其他前缀哦！

Answer 3

一楼正解，top,left跟根据父元素的宽和高偏移的，而transform: translate(-50%, -50%);是根据自身的宽高偏移的。

Answer 4

哟西,这个写法高端，以前我要居中是top:50%,left:50%;margin-top:-$(this).height()/2;margin-left:-$(this).width()/2；也就是还要计算元素的宽和高的一半，现在方便了，哈哈