html - 变换 : translate(-50%, -50%)

Question

在处理主图或全屏显示时，我通常会看到带有以下 CSS 的文本或图像:

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

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

Answer 1

之所以需要 transform: translate(-50%, -50%) 是因为您希望元素的中心与元素的中心对齐它的 parent 。简单来说，可以归结为translateX(-50%) translateY(-50%)，意思是:

• 将我沿 x 轴向左移动宽度的 50%，然后
• 沿 y 轴将我向上移动我高度的 50%

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

作为概念验证，请参见下面的代码片段:将鼠标悬停在父元素上，使子元素的“幽灵”通过 transform: transform(-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>