html - 在 flex 容器元素上垂直居中文本

Question

我有这个codepen https://codepen.io/luisguerra/pen/prROqY ，我试图将每个元素中的文本垂直居中。

我想要的原因是我不知道列表中会有多少元素，我希望它们以相同的高度分布并且每个垂直居中(所有元素应该只有 1 行)但是 line-height : 100% 行不通，想法？

.site-content {
  height: 400px;
}

.menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  flex: 1;
}

 <div class="site-content">
      <div class="menu">
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
     </div>
</div>

    

Answer 1

justify-content: center 到 .menu 会帮助你，因为你的 flex-direction 是 column .