position: absolute 与 transform

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

原理：

 

 

理解

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

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