如何在CSS3中使用flexbox实现内容垂直对齐？

核心前置要求 #

要使用Flexbox的对齐能力，首先需要给包裹内容的父容器设置display: flex属性，且父容器必须有明确的高度（固定height或min-height都可），否则垂直对齐没有参照基准不会生效。

常见场景实现方法 #

• 所有子元素统一垂直对齐（最常用）
  给父容器添加align-items: center属性即可，适用于单行内容、所有子项高度相近的场景，如需同时实现水平居中，额外添加justify-content: center即可。
  示例代码：

  .parent {
    display: flex;
    align-items: center;
    /* 可选：水平居中 */
    justify-content: center;
    height: 240px;
    border: 1px solid #eee;
  }
  

• 多行子元素整体垂直对齐
  如果子元素会发生换行，需要整个内容块在父容器内垂直居中，父容器需要同时设置flex-wrap: wrap和align-content: center。
• 单个子元素单独垂直对齐
  不需要修改父容器配置，直接给目标子元素添加align-self: center属性即可，该属性优先级高于父容器的align-items设置。

注意事项 #

如果你修改了父容器的主轴方向为垂直（设置flex-direction: column），此时垂直对齐的控制属性会切换为justify-content: center，align-items将变为控制水平方向对齐。

完整示例 #

HTML代码：

<div class="card">
  <div class="content">
    <p>多行内容演示</p>
    <p>全部内容会在卡片内垂直居中</p>
  </div>
</div>

CSS代码：

.card {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

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