Flex布局子元素无法垂直居中

问题现象

设置了display: flex和align-items: center，但子元素仍未垂直居中，或父元素高度塌陷。

深层原因

1. 父元素无明确高度：交叉轴无参考高度，垂直居中无从谈起。
2. 混淆align-items和align-content：前者控制单行子元素对齐，后者控制多行子元素对齐。
3. 子元素脱离Flex布局 ：如子元素设置了position: absolute。

分步解决方案

步骤1：给父元素设置明确高度（核心）

.parent {
  display: flex;
  justify-content: center; /* 水平居中（主轴） */
  align-items: center; /* 垂直居中（交叉轴） */
  height: 500px; /* 关键：设置高度（固定值/百分比/min-height） */
  background: #f0f0f0;
}
.child {
  width: 100px;
  height: 100px;
  background: #ff4400;
}

步骤2：区分align-items和align-content

• align-items：子元素单行排列时，控制子元素在交叉轴的对齐方式。
• align-content：子元素多行排列 时（需设置flex-wrap: wrap），控制行与行之间的对齐方式。

.parent {
  display: flex;
  justify-content: center;
  align-content: center; /* 多行时行对齐 */
  align-items: center; /* 单行时子元素对齐 */
  flex-wrap: wrap; /* 允许换行 */
  height: 500px;
  background: #f0f0f0;
}
.child {
  width: 100px;
  height: 100px;
  margin: 10px;
}

步骤3：处理脱离Flex布局的子元素

若子元素设置了position: absolute，需用定位实现居中：

.parent {
  position: relative; /* 父元素相对定位 */
  height: 500px;
  background: #f0f0f0;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身居中 */
  width: 100px;
  height: 100px;
}