Question

使用英雄图片或全屏幕时，我通常会看到带有以下css的文字或图片：

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

有人可以向我解释这段代码实际上在做什么吗？

Answer 1

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

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

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

作为一个概念验证，请参阅下面的代码片段：将鼠标悬停在父代上，以使子元素＆＃34;幽灵＆＃34;通过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%); }：

重新定位自己

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

:data-transactions

＆＃13;

Answer 2

TL; DR版本

比方说，里面有.container和.item

下面的这段代码将.item相对于.container定位；表示.item 左上角在其容器的中心

.item {
  top: 50%;
  left: 50%;
}

在下面将.item相对于自身的宽度和高度定位；表示减去宽度和高度的50％

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

如果下面的两个代码结合在一起，则预期的中心将出现

变换：平移（-50％， - 50％）

2 个答案: