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

这样做会将文本放置在容器的垂直中心，但在水平方向上偏离中心。我认为＆＃34;左：50％＆＃34;将它正确地水平居中，不是吗？

Answer 1

关闭，但您还需要添加translateX。幸运的是，这是一个很好的速记，可以同时完成X和Y变换：

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

它稍微偏离中心的原因是因为left: 50%推动元素使其左侧精确到达50％。添加transformX(-50%)否定了额外的空间。请参阅下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您可以使用flexbox，我建议您使用它。这使得这很简单：

body {
  margin: 0;
}

.container {
  height: 400px; /* Just for the snippet */
  width: 400px; /* Just for the snippet */
  background-color: #f4f4f4; /* Just for the snippet */
  margin: 0 auto; /* Just for the snippet */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="center">
    This is centered
  </div>
</div>

您可以在此处找到有关Flexbox浏览器支持的信息：http://caniuse.com/#search=flex

平移（Y）垂直中心方法不起作用 - 稍微偏离中心

2 个答案: