首先来看一下代码
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
我开始没太在意 以为transform:translate(-50%,-50%);
这样把上面的 top:50%,left:50% 抵消了呢 !
后来查资料看明白了 不是这样的
首先 top,left 是根据父元素的宽和高 来偏移的 ,
而transform: translate(-50%, -50%); 则是根据自己的宽和高来偏移的
接着是 以自身宽和高来偏移的
本质上是由区别的 1 定位是相对于祖父及元素
2 translate相对于自身来偏移