为什么这些子标题不居中？ [复制]

Question

我想将<div> 水平和垂直居中，子元素<h1> 和<h2> 应该相对于父<div> 水平居中，所以我为此应用了一个类，如下所示。它不是居中的，而是左对齐。怎么回事？

.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;