如何在Flex Box中垂直对齐元素？实现文本与高盒子居中

只需给容器.container添加Flex相关属性即可实现，具体操作：

• 给.container设置display: flex开启Flex布局，同时添加align-items: center——这个属性会让所有子元素在垂直方向（Flex交叉轴）上居中对齐，不管子元素自身高度差异。

完整代码示例：

HTML代码 #

<div class="container">
  <div class="box"></div>
  <div class="text">abc</div>
  <div class="text">abc</div>
</div>

CSS代码 #

.container {
  display: flex;
  align-items: center; /* 核心属性，实现垂直居中 */
}

.box {
  height: 50px;
  width: 50px; /* 可选，添加宽度方便查看效果 */
  background-color: #eee; /* 可选，添加背景色更直观 */
}

补充说明 #

Flex容器默认的主轴是水平方向，交叉轴为垂直方向。align-items: center会将所有子元素的中点与交叉轴的中点对齐，因此文本元素会自动和50px高的盒子实现垂直居中对齐，不需要额外给文本元素设置margin或padding。

内容的提问来源于stack exchange，提问作者Pruss