CSS中`transform:translate(-50%, -50%)`如何实现完美居中？

变换的魔力：翻译(-50%,-50%)

处理大图像或全屏元素时， CSS 开发人员经常使用一个奇怪的代码片段：

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

这段代码背后的目的是什么，它是如何实现的有效吗？

transform 属性会移动元素相对于其原始参考点的位置。在这种特定情况下，translate(-50%, -50%) 将元素在 X 轴和 Y 轴上平移其自身大小的 -50%。

要理解为什么这是必要的，让我们打破它向下进入其组件：

• translateX(-50%)：将元素向左移动其宽度的 50%，将其中心点移动到它之前的左上角。
• translateY(-50%)：将元素向上移动其高度的 50%，再次将中心点带回原来的左上角。

通过将 top 和 left 设置为 50%，我们最初将元素的左上角移动到其父容器的中心。然而，这使得元素的中心点偏离父元素的中心。

transform:translate(-50%, -50%) 通过将元素向左和向上移动一半来纠正这个问题。它自己的大小。这可确保元素的中心点与其父元素的中心点对齐，从而实现完美的水平和垂直居中。

要可视化效果，请将鼠标悬停在以下代码片段上：

body {
  margin: 0;
  padding: 0;
}

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

请注意，当您将鼠标悬停在父容器上时，居中元素的红色“幽灵”如何平滑地移动到位。这演示了如何使用transform:translate(-50%, -50%)在CSS中实现完美居中。

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