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

原理:

 

 

理解

     1.絕對定位元素的定位基準點是其有定位元素的祖先元素

     2.而translate要做偏移,是相對於自身的中心點而言,如果用百分比做單位,參考值就是本身元素的寬度