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>

相对定位和内联元素保留其块特征：

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()。
• 始终添加不含供应商前缀的属性。