flex子元素纵向不居中，首要原因是容器缺少明确高度；需设置height或min-height，并确保祖先元素高度传递，同时注意flex-direction为column时应使用justify-content:center而非align-items:center。
flex 容器里子元素纵向不居中？先确认父容器高度是否明确
很多情况下 align-items: center 看似没生效，根本原因是 flex 容器自身没有可参考的高度。flex 的纵向对齐依赖容器的 height 或 min-height，如果父容器高度由内容撑开（比如默认的 height: auto），那“居中”就失去了参照基准。
实操建议：
- 给 flex 容器显式设置
height（如height: 100vh）或min-height（如min-height: 100vh） - 若容器在文档流中嵌套较深，检查所有祖先元素是否都传下了高度（常见断点：
html、body缺少height: 100%） - 用浏览器开发者工具选中容器，看 computed height 是否为 0 或远小于预期
align-items: center 在 column 方向下无效？检查 flex-direction
align-items 控制的是“交叉轴”上的对齐。当 flex-direction: row（默认）时，交叉轴是垂直方向，align-items: center 就管纵向居中；但一旦设了 flex-direction: column，交叉轴就变成水平方向，此时 align-items: center 反而控制的是**横向居中**，纵向对齐得靠 justify-content: center。
常见错误现象：写了 flex-direction: column; align-items: center; 却发现元素上下贴边、不居中。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 纵向居中 + column 布局 → 改用
justify-content: center - 保持 row 布局 + 纵向居中 → 确保
align-items: center且容器有高度 - 不确定方向影响？临时删掉
flex-direction回到默认值测试
子元素是块级元素但还是偏上？可能是 margin 或 display 干扰
即使 align-items: center 生效，某些子元素自身样式仍可能破坏视觉居中效果。典型干扰源：
- 子元素有
margin-top/margin-bottom，尤其margin: 1rem 0类写法会强制拉开距离 - 子元素是
display: inline-block或display: inline，它们默认按 baseline 对齐，和 flex 的交叉轴对齐逻辑冲突 - 子元素内部有未清除的浮动，或设置了
vertical-align（对 flex 子项无效但容易误判）
快速验证：临时给子元素加 margin: 0 !important 和 display: block !important，看是否恢复居中。
需要兼容老版本 Safari？注意 align-items 的 vendor 前缀问题
iOS Safari 8–9 和部分旧版 Android Browser 对 align-items 支持不完整，单独写 align-items: center 可能被忽略。虽然现在大多数项目已不需兼容这些版本，但如果测试环境出现“同代码在 Chrome 正常、Safari 偏顶”，要留意：
- 加上
-webkit-align-items: center前缀 - 确保
display: flex也带前缀：display: -webkit-flex - 避免混用新旧语法（比如用
box-pack同时写align-items），会导致解析冲突
.container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: 100vh;
}
最常被忽略的其实是第一点：没给容器设高度。很多人盯着 CSS 写法反复检查，却忘了打开开发者工具看一眼 computed height 是不是 0 —— 那后面所有对齐设置都是在对空气操作。
