如何在div中垂直居中放置文本？

Question

我在HTML页面上有一个方框，其中将出现倒计时。 .countdown_box框构成一个单元格，倒计时文本.cd_text应该水平和垂直对齐。将其与中间对齐没问题。水平对齐方式很好，但是我不能使其垂直对齐。

.countdown_box {
  border: 2px solid black;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
}

.cd_text {
  font-size: 0.9rem;
  font-weight: bold;
  color: #5a6268;
  width: auto;
}

<div class="countdown_box">
  <h5 class="cd_text"># Days Left</h5>
</div>

我知道这似乎是一个显而易见的问题，但是我尝试了几种不同的方法，但没有任何效果。我已经在该网站，W3 Schools和大量的在线教程上尝试过解决方案，但仍然一无所获。我想我一定缺少一些重要的东西。