父容器高度为0导致align-items: center失效，因交叉轴需可计算尺寸；应设min-height: 100vh或确保上层容器height: 100%，或改用margin: auto。
父容器没高度，align-items: center 直接失效
写了 display: flex 和 align-items: center 却不垂直居中？十有八九是父容器 height 为 0。Flex 的交叉轴（默认 Y 轴）需要可计算的尺寸才能确定“中点”，而 height: auto 且无内容撑开时，浏览器算出来的就是 0。
常见表现：justify-content: center 有效（水平居中了），但子元素仍贴顶；DevTools 里看父容器 computed height 是 0。
- 全屏场景：用
min-height: 100vh，比height: 100vh更稳妥（避免 iOS Safari 地址栏缩放跳变） - 嵌套场景：确保所有上层容器（包括
html、body）都设了height: 100%或min-height: 100% - 不想硬设高度？改用
margin: auto—— 子元素加这句，父容器保持display: flex，它会自动在二维方向填满剩余空间
justify-content 和 align-items 方向随 flex-direction 变
默认 flex-direction: row 时，justify-content 控水平，align-items 控垂直；一旦改成 column，两者的控制轴就对调了。只写其中一个，很容易只居中了一半。
- 只写
justify-content: center+flex-direction: column→ 实际是垂直居中，水平仍贴左 - 只写
align-items: center+flex-direction: column→ 实际是水平居中，垂直仍贴顶 - 要稳：始终同时写
justify-content: center和align-items: center，别依赖方向猜测 - 别误用
align-content: center—— 它只对多行换行（flex-wrap: wrap且真换行）生效，单行完全无效
子元素自身样式干扰 Flex 居中逻辑
Flex 居中由父容器统一调度，子元素保持“自然状态”最可靠。加一些看似无害的样式，反而会破坏对齐。
立即学习“前端免费学习笔记（深入）”；
- 给子元素加
margin: auto：在 Safari 中可能和父级align-items冲突，导致上下偏移 - 设
width: 100%或flex: 1：不是必须时别加，它会拉伸子元素，可能掩盖真实居中效果 - 用
position: absolute：子元素已脱离文档流，align-items对它完全无效 - 内联元素（如裸文本）因基线对齐产生视觉偏移，建议包一层
<div>或设display: inline-block
兼容性与替代方案的取舍点
place-items: center 看起来更简洁，但它不是万能替代。是否用它，取决于你的兼容性底线。
-
place-items: center：Chrome 57+、Firefox 52+、Safari 10.1+ 支持，IE11 不支持；适合现代项目，一行搞定二维居中 -
justify-content: center; align-items: center：IE10–11 有 bug（尤其 justify-content），但 IE9 及以下完全不支持；老项目首选，兼容性更可控 - 绝对定位 +
transform: translate(-50%, -50%)：IE9+ 都支持，但要求父容器有position: relative，且滚动时若父容器定位上下文不稳，位置容易飘
真正容易被忽略的，不是属性名记错，而是每次改完样式后，先打开 DevTools 看一眼父容器的 computed height —— 它比反复调 align-items 有效十倍。
