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

  • Z时代
  • 2024-01-10
  • 分类：问答

当使用英雄图像或全屏显示时，我通常会看到带有以下CSS的文本或图像：

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

有人可以向我解释此代码的实际作用吗？

回答：

之所以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>

以上是 转换：翻译（-50％，-50％） 的全部内容， 来源链接： utcz.com/qa/408442.html

回到顶部