为什么
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
能起到居中的效果
这里不应该相互抵消掉了相当于没有布局么
哟西,这个写法高端,以前我要居中是top:50%,left:50%;margin-top:-$(this).height()/2;margin-left:-$(this).width()/2;也就是还要计算元素的宽和高的一半,现在方便了,哈哈
top left是相对于外层第一个包含relative的元素,transform相对于自己。如果要支持很多游览器,不要忘记给transform加其他前缀哦!
一楼正解,top,left跟根据父元素的宽和高偏移的,而transform: translate(-50%, -50%);是根据自身的宽高偏移的。
画一个图应该就很清晰明了了
第一步
第二步
所以本质上理解
1.绝对定位元素的定位基准点是其有定位元素的祖先元素
而translate要做偏移,是相对于自身的中心点而言,如果用百分比做单位,参考值就是本身元素的宽度
图画的不太好,哈哈哈