`transform:translate(-50%, -50%)` 如何将元素居中？

理解“变换：翻译（-50%，-50%）”的作用

使用英雄图像或元素时跨越整个屏幕，经常会遇到这样的 CSS 代码：

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

但是这段代码是做什么用的实际完成了吗？

理解这段代码的关键是要认识到它将元素的中心与其父元素的中心对齐。这是通过以下方式实现的：

• translateX(-50%): 将元素向左移动其宽度的 50%，有效地将其沿 x 轴居中。
• translateY(-50%): 将元素向上移动 50% height，沿 y 轴居中。

通过将元素向左和向上移动其宽度和高度的一半，使元素的中心与其父元素的中心对齐，从而实现水平和垂直和垂直居中。

为了说明这一点，请考虑以下代码片段：

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%);
}

当您将鼠标悬停在父级上时元素中，通过应用变换：translate(-50%, -50%) 属性，幽灵元素 (.child::before) 变得视觉居中。

以上是`transform:translate(-50%, -50%)` 如何将元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！