html - 绝对跨度以下的居中文本

Question

在下面的代码中，我有一个包含数字及其单位(在示例中为 1000 英里)的 div。数字在 div 中居中 OK，但我需要单位在数字的下方 居中。这怎么可能？

div.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;
  position: relative;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.units {
  margin: 0 auto;
}

<div class="div1">
  <span class="number">1,000</span>
  <br/>
  <span class="units">miles</span>
</div>

Answer 1

使用 flexbox

.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;

  display: flex;
  flex-direction: column;
  justify-content: center;    /* Vertical center */
  align-items: center;    /* Horizontal center */
}

.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}

<div class="div1">
  <span class="number">1,000</span>
  <span class="units">miles</span>
</div>