为什么这些 children headers 不居中？

Question

我想将 <div> 水平和垂直居中，children <h1> 和 <h2> 元素应该相对于 parent 水平居中<div>，所以我为此应用了 class，如下所示。它没有居中，而是左对齐。怎么回事？

.centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hcentered {
  left: 50%;
  transform: translate(-50%, 0);
}

.results {
  position: absolute;
}

.resultsText {
  position: relative;
}

<div class="centered results">
  <h1 class="hcentered resultsText">Header 1</h1>
  <h2 class="hcentered resultsText">Header 2</h2>
</div>

Answer 1

h1 和 h2 是块级元素，因此默认情况下它们是 100% 宽。无需所有复杂的计算，只需使用 text-align: center;