变换:平移(-50%, - 50%)

Question

使用英雄图像或全屏任何东西时,我通常会看到带有以下css位的文本或图像:

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

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

Answer 1

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

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

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

作为概念验证,请参阅下面的代码片段:将鼠标悬停在父元素上以使子元素的"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 class="parent">
  <div class="child"></div>
</div>

Answer 2

TL;DR 版本

假设里面有 a.container和 a .item。

下面的这段代码.item相对于定位.container；意味着.item 左上角位于其容器的中心

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

而下面则是.item相对于自身的宽度和高度定位；意思是宽度和高度的负 50%。

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

如果将下面的两个代码片段组合起来，就会显示预期的中心。