html - 平移(Y)垂直中心方法不起作用 - 稍微偏离中心

Question

我有这个简单的代码来垂直和水平居中页面上的文本元素:

 body {
   max-width: 1200px;
   margin: 0 auto;
 }

 .container {
   position: relative;
   transform-style: preserve-3d;
   height: 100vh;
 }

 .center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%);
 }

这样做会将文本放置在容器的垂直中心，但会稍微偏离水平方向的右侧。我会认为“左:50%”会正确地水平居中，不是吗？

Answer 1

关闭，但您还需要添加 translateX。幸运的是，有一个很好的简写方式可以同时完成 X 和 Y 变换:

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

它稍微偏离中心的原因是 left: 50% 插入元素，使其左侧恰好位于 50%。添加 transformX(-50%) 会取消该额外空间。请看下面的片段:

.box-container {
  position: relative;
  height: 200px;
}

.center-box {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box-container">
  <div class="center-box"></div>
</div>