转换：翻译（-50％，-50％）

转换：翻译（-50％，-50％）

之所以

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

需要这样做，是因为您希望 元素 的中心与父 元素
的中心对齐。简单来说，可以归结为

translateX(-50%) translateY(-50%)

，这意味着：

• 沿x轴向左移动我宽度的50％，并且
• 沿y轴将我向上移动我身高的50％

这有效地将元素的中心移动到其原始的左上角。请记住，而不是在

left: 50%; top50%

元素上进行设置时，您要将其左上角移至其父级的中心（这意味着它根本不在视觉上居中）。通过将元素分别向左和向上移动其宽度和高度的一半，您可以确保其中心现在与父对象的中心对齐，从而使其在视觉上水平+垂直居中。

作为概念验证，请参见下面的代码段：将鼠标悬停在父元素上，以通过以下方式使子元素的“ ghost”重新定位

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

：

body {  margin: 0;  padding: p;}.parent {  background-color: #ccc;  width: 100vw;  height: 100vh;  position: relative;}.child {  background-color: rgba(0,0,255,0.5);  width: 50px;  height: 50px;  position: absolute;  top: 50%;  left: 50%;}.child::before {  background-color: rgba(255, 0, 0, 0.5);  position: absolute;  top: 0;  left: 0;  width: 50px;  height: 50px;  content: '';  transition: all .5s ease-in-out;}body:hover .child::before {  transform: translate(-50%, -50%);}<div >  <div ></div></div>