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

Question

当英雄的图像或全屏幕上的任何工作，我通常看到的文字或图片与CSS的以下位：

.item { 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

谁能给我解释一下这段代码实际上在做什么？

Answer 1

需要transform: translate(-50%, -50%)的原因是因为您希望元素的中心与其父级的中心对齐。简单来说，它可以被归结为translateX(-50%) translateY(-50%)，这意味着：

• 通过我的宽度的50％向左移动箱，沿x轴，和
• 通过我的高度的50％向上移动我，沿着y轴

这有效地将元素的中心移动到其原始的左上角。请记住，当您在元素上设置left: 50%; top 50%时，您将其左上角移到其父项的中心（这意味着它根本没有视觉中心）。通过将元素分别向左和向上移动其宽度和高度的一半，确保其中心现在与父级中心对齐，从而使其视觉上水平+垂直居中。

作为证据的概念，请参见下面的代码片段：将鼠标悬停在父引起子元素的“鬼”的手段重新定位的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 class="parent"> 
 
    <div class="child"></div> 
 
</div>