必须同时设置justify-content: center和align-items: center，且父容器需有可计算高度（如height: 100vh），否则align-items在交叉轴（默认垂直方向）无空间可居中，导致垂直居中失效。
只写 justify-content: center 和 align-items: center 是不够的，缺一不可，且父容器必须有可计算的高度——否则垂直方向一定不生效。
为什么 align-items: center 看起来没反应
因为 align-items 依赖交叉轴（默认是垂直方向）有可分配空间。如果父容器高度是 auto、未声明高度，或靠内容撑开，那它的交叉轴长度就是子元素自身高度，自然没有“中间”可言。
- 检查开发者工具的 Computed 面板，确认父容器
height值是否 > 0 - 用
height: 100vh最直接；min-height: 100vh更安全，但不能替代height来触发对齐计算 - 若父容器是
，别忘了重置：html, body { height: 100%; margin: 0; } - 嵌套在 Grid 子项或绝对定位容器中时，确保该父容器本身已获得确定高度，而非“由 flex 自动收缩”
justify-content 和 align-items 必须同时出现
默认 flex-direction: row 时：justify-content 控制水平（主轴），align-items 控制垂直（交叉轴）。只写一个，结果就是“一半居中”：
-
justify-content: center单独用 → 水平居中，但顶部贴父容器上边缘 -
align-items: center单独用 → 垂直居中，但左边缘贴父容器左边缘 - 两者必须共存，且都只作用于父容器的**直接子元素**
- 若父容器设了
flex-direction: column，角色互换：justify-content管垂直，align-items管水平
哪些情况会让 Flex 居中彻底失效
Flex 的对齐逻辑只作用于文档流内的 flex item。一旦子元素脱离流，整个机制就跳过它：
- 子元素写了
position: absolute或position: fixed→justify-content和align-items完全无效 - 子元素用了
float→ 同样不参与 flex 排列 - 父容器误写了
display: grid（覆盖了display: flex）→ 控制台不报错，但align-items不再起作用 - 混用
margin: auto和align-items: center→ 行为不可控，尤其在 IE10–11 中垂直方向可能失效
移动端和 Safari 的 100vh 陷阱
iOS Safari 和部分 Android 浏览器中，地址栏收放会动态改变视口高度，导致 100vh 缩放，居中元素“跳动”。这不是 Flex 问题，而是单位限制：
- 可用
min-height: -webkit-fill-available作为兜底（Safari 支持） - 更稳妥的做法：用
100dvh（dynamic viewport height），Chrome 105+、Firefox 110+、Safari 16.4+ 已支持 - 避免在滚动容器内（如
overflow: auto的 div）里直接用100vh，应改用明确像素值或100%配合父级高度约束
真正容易被忽略的是：Flex 居中不是“让子元素动”，而是“给父容器定义好主轴和交叉轴的尺寸与对齐规则”。只要父容器高度不可算、子元素不在流内、或 display 值被覆盖，就等于没启动这个规则——它不会报错，也不会警告，只是安静地不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
