CSS TranslateX(-50%) 未按预期工作

Question

TranslateX(-50%) 而不是将元素(.heading)放在中心，而是将它放在最左边

.heading {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
color: #fff;
}

Answer 1

根据您想要实现的目标，您有三种选择:

• position: absolute;，垂直和水平居中元素，不占用文档正常流中的任何空间。
• position: relative 和 display: inline-block;，将元素垂直和水平居中，在文档的正常流中占据空间，就好像它在其正常点。
• text-align: center;，使行内元素居中。

---

绝对定位:

body {
  margin: 0;
  height: 100vh;
}
.heading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: red;
}

<div class="heading">
  Heading
</div>

---

相对定位和内联元素保留其 block 特性:

body {
  margin: 0;
  height: 100vh;
}
.heading {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: red;
}

<div class="heading">
  Heading
</div>

---

文本居中对齐:

body {
  margin: 0;
  height: 100vh;
}
.heading {
  text-align: center;
  color: red;
}

<div class="heading">
  Heading
</div>

---

注意事项:

• 使用简写函数translate()。
• 始终在下方添加不带供应商前缀的属性。