为什么设置display:flex后align-items无法实现div垂直居中？

架构老林

2026-10-5

问题原因

你的代码存在两个核心问题导致垂直居中不生效：

.container-body 没有设置足够的高度：flex 布局的对齐属性生效前提是容器自身高度高于内容高度，你当前没有给该容器设置高度，它的高度仅由内部文本撑开，没有多余空间做垂直对齐。
flex 对齐属性用错：你给 .container-body 设置了 flex-direction: column，此时flex主轴为垂直方向、交叉轴为水平方向，align-items 控制的是交叉轴（水平）方向的对齐，垂直方向的对齐需要使用 justify-content 属性。

修复方案

仅需修改两处CSS即可实现效果：

给body添加flex布局，让子元素可以自动分配高度：

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
  /* 新增以下两行 */
  display: flex;
  flex-direction: column;
}

修改.container-body的样式，填充剩余高度并设置垂直居中：

.container-body {
  display: flex;
  align-items: center;
  flex-direction: column;
  /* 新增以下两行 */
  flex: 1; /* 自动占用body中除header外的所有剩余高度 */
  justify-content: center; /* 控制主轴（垂直方向）内容居中 */
}