垂直居中失效主因是父容器无高度，必须设min-height或height；justify-content与align-items分控主轴与交叉轴，方向随flex-direction变化；避免误用align-content及子元素干扰样式。
justify-content 和 align-items 必须同时设置，且父容器必须有可计算高度，否则垂直居中一定失效。
父容器没高度是 90% 的失败原因
浏览器计算 align-items: center 依赖交叉轴（默认为垂直方向）的尺寸。如果父容器 height: auto 且内部无内容撑开，它实际高度为 0，align-items 就没有“中点”可参考——看起来完全没反应。
- 常见错误：
.container { display: flex; justify-content: center; align-items: center; }但没设height或min-height - 推荐写法：
min-height: 100vh（全屏高），或固定值如height: 400px - 若父容器是
，记得重置：html, body { height: 100%; margin: 0; } - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可用min-height: -webkit-fill-available兜底
justify-content 和 align-items 各管一轴，不能互换
它们的作用方向由 flex-direction 决定。默认 flex-direction: row 时：justify-content 管水平（主轴），align-items 管垂直（交叉轴）。一旦改成 column，两者的控制方向就对调了。
- 只写
justify-content: center→ 水平居中（row）或垂直居中（column），但另一方向不变 - 只写
align-items: center→ 垂直居中（row）或水平居中（column），但另一方向仍按flex-start贴边 - 误用
align-content: center：它只对多行 Flex 容器（flex-wrap: wrap且真换行）生效，单行无效
别给子元素加干扰样式
Flex 居中由父容器统一控制，子元素保持“自然状态”最可靠。
- 不要给子元素设
margin: auto：虽在部分场景下也能居中，但行为边界模糊，嵌套时易与父级align-items冲突 - 避免设
flex: 1、width: 100%或height: 100%：除非业务明确需要拉伸，否则纯属干扰布局流 - 内联元素（如裸文本）可能因基线对齐产生视觉偏移，建议包一层
<div> 或设 <code>display: inline-block - 绝对定位子元素（
position: absolute）已脱离文档流，align-items对其完全无效
兼容性与替代方案提醒
place-items: center 更简洁，但 IE11 不支持；Chrome 84+、Firefox 70+、Safari 14.1+ 才可用。若需兼容老版本，坚持用 justify-content + align-items 组合更稳妥。
真正容易被忽略的，不是属性名记错，而是每次改完样式后，先看一眼父容器的 computed height —— 它比反复调 align-items 有效十倍。
