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

使用“translate(-50%,-50%)”转换元素

在 Web 开发中，居中元素可能是一项常见任务，特别是对于全屏图像或英雄部分。用于此目的的一个经常遇到的 CSS 片段是 .item { top: 50%;左：50%；变换：翻译（-50%，-50%）； }.

解构代码

此代码的目标是将元素的中心与其父容器的中心对齐。将其分解为各个组成部分：

• 顶部：50%； left: 50%;：这将元素的顶部和左侧位置分别设置为父级高度和宽度的 50%。如果没有变换，这会将元素的左上角置于其父元素的中心。
• transform:translate(-50%, -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%);
}

当您将鼠标悬停在 .parent 元素上时，.child::before 元素会向后和向上移动 50%宽度和高度，显示 .child 元素的原始位置。这演示了转换：translate(-50%, -50%) 在视觉上和数学上使元素居中的效果。

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