transform:translate(-50%,-50%),left:50% top:50%

left:50%

使图像距离父盒子(这里可以理解为浏览器整个页面)左边50% 即为距离左边为父盒子一半的距离

top:50%

高度是父盒子的一半

transform:translate(-50%,-50%)往上(x轴),往左(y轴)移动自身长宽的50%,使其居于中心位置

原文地址:https://www.cnblogs.com/LiQingXin/p/14349943.html