垂直对齐 div 内的两行文本

Question

在这篇文章之前，我阅读了几篇关于该主题的文章，并且我已经了解了一些用于垂直对齐的技巧 - 单行文本的行高、几个 div 和 Flexbox 的 display:table在 CSS3 中。但我仍然需要帮助来对齐 div 内的两条线：

.keys {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.key {
  border: 0.1rem solid white;
  margin: 1rem;
  width: 5rem;
  height: 5rem;
  padding: 0.5rem 0;
  text-align: center;
  color: white;
}

kbd {
  display: block;
}

<div class="keys">
  <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div>
  <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div>
  <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div>
  <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div>
</div>

如您所见，我已经有一个 flexbox 容器，要使用 display:table 需要一个额外的 div。也许使用填充或一些相对定位将是答案。将此文本内容垂直居中的最佳方式是什么？

Answer 1

评论后更改答案：

将此添加到.key 以使其成为一个弹性容器，使其内容彼此居中（已经存在的text-align: center 进行水平文本居中）：

display: flex;
flex-direction: column;
justify-content: center;

（注意：由于一切都是白色的，因此仍然是不可见的，我为.key 元素添加了黑色背景）

.keys {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0.1rem solid white;
  margin: 1rem;
  width: 5rem;
  height: 5rem;
  padding: 0.5rem 0;
  text-align: center;
  color: white;
  background: black;
}

kbd {
}

<div class="keys">
  <div class="key" data-key="65"><kbd>A</kbd><span class="sound">text</span></div>
  <div class="key" data-key="83"><kbd>S</kbd><span class="sound">text</span></div>
  <div class="key" data-key="68"><kbd>D</kbd><span class="sound">text</span></div>
  <div class="key" data-key="70"><kbd>F</kbd><span class="sound">text</span></div>
</div>