flex容器子项不垂直居中的核心原因是容器未启用flex布局或未设置align-items: center；需确保display: flex生效、父容器有真实高度、子项未溢出且无align-self覆盖。
flex 容器设置了 height 但子项仍不垂直居中
核心原因通常是容器未启用 flex 布局，或未正确设置交叉轴对齐方式。即使写了 display: flex，若遗漏 align-items，子项仍按默认的 stretch 行为拉伸（或按内容自然排列），而非居中。
-
display: flex必须显式声明在父容器上，仅设height不触发 flex 行为 -
align-items: center才控制交叉轴（默认为纵轴）居中；justify-content: center管主轴（默认为横轴） - 若子项是块级元素且自身有
margin: auto，在 flex 下可能被忽略——优先以align-items和justify-content为准
子项高度超出容器导致视觉上“没居中”
当子项内容撑高、或设置了固定 height 超过父容器时，align-items: center 仍会将其几何中心对齐到容器中心，但顶部/底部可能被截断，造成“偏上”错觉。
- 用浏览器开发者工具检查子项实际渲染高度（含 padding/border/margin）是否 > 父容器
height - 给子项加
box-sizing: border-box避免内边距意外撑高 - 临时加
outline: 1px solid red到子项，直观查看其真实占位范围 - 若需子项自适应高度，避免设死
height，改用max-height+overflow: hidden或flex: 1
父容器 height 是百分比但未继承有效高度
写 height: 100% 没用，除非所有祖先元素（包括 html、body）都明确设了高度。否则百分比高度计算结果为 0，flex 交叉轴对齐失去参照。
- 检查 computed height：在 DevTools 中看父容器最终解析出的高度值是否 > 0
- 常见修复：
html, body { height: 100%; margin: 0; } .container { height: 100%; display: flex; align-items: center; } - 更可靠的方式是用视口单位：
height: 100vh（注意 Safari 对100vh在地址栏收起时的兼容问题） - 若容器位于某个弹性上下文中（如另一个 flex 容器内部），确保该上级容器也设置了明确高度或
flex: 1
使用 align-self 覆盖了 align-items
子项单独设置了 align-self: flex-start（或 flex-end、stretch）时，会覆盖父容器的 align-items 设置，导致个别子项不居中。
立即学习“前端免费学习笔记（深入）”；
- 全局搜索 CSS 中是否对子项写了
align-self - 检查子项是否被其他样式规则（如重置库、组件库默认样式）注入了
align-self - 临时在子项上加
align-self: center !important测试是否恢复居中（确认后应移除!important，改从源头清理冲突）
align-items。建议按顺序查：容器是否真 flex → 父高度是否真实存在 → 子项是否真的“够小” → 有没有 align-self 在捣乱。 
