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

小编典典

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

css

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

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

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

阅读 442

2020-05-16

共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>

2020-05-16