Flexbox水平垂直居中需同时设置display: flex、justify-content: center和align-items: center，且父容器必须有可计算的交叉轴尺寸（如min-height: 100vh），否则align-items: center因无空间而静默失效；属性作用方向随flex-direction变化，仅对直接子元素生效。
不需要给子元素设固定高度，但父容器必须有可计算的交叉轴范围，否则 align-items: center 会“居中成功却看不见”。
父容器没高度，align-items: center 就是摆设
Flex 的垂直居中（默认交叉轴为垂直方向）依赖父容器在该轴上有明确长度。如果父容器 height: auto 且内容极简（比如只有一行文字），它的实际高度可能刚好等于行高，此时 align-items: center 虽已生效，但视觉上毫无变化——不是没起作用，而是“中间”和“顶部”重合了。
- 加
min-height: 100vh是最直接的解法，比height: 100vh更安全（避免内容超长时溢出） - 移动端优先用
min-height: 100dvh，iOS Safari 地址栏收放时更稳；老 iOS 可加min-height: -webkit-fill-available兜底 - 若嵌套在 body 中，别只给 body 设
display: flex—— html 和 body 都得加height: 100%，否则高度链断在根节点
justify-content 和 align-items 方向由 flex-direction 决定
很多人死记“justify 水平、align 垂直”，一换 flex-direction: column 就翻车。其实它们永远分别控制主轴和交叉轴：主轴变垂直，justify-content 就管垂直对齐，align-items 反而管水平。
- 默认
flex-direction: row→ 主轴水平 →justify-content水平，align-items垂直 - 改成
column后，若仍想垂直居中，就得写justify-content: center（此时它管垂直），align-items: center反而负责水平 - 响应式中动态切换
flex-direction时，务必同步检查对齐属性是否还符合预期
子元素脱离文档流，Flex 对齐立刻失效
position: absolute 或 float 会让子元素退出 flex 流，此时 justify-content 和 align-items 对它完全无效——你再怎么设，它都按定位规则走。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：父容器设了
display: flex; align-items: center;，子元素却加了position: absolute，结果纹丝不动 - 如果真需要绝对定位 + 居中效果，改用
margin: auto（仅限单个子元素，且父容器为 flex 或 grid） - 盒模型干扰也要防：父容器的
padding或border会让子元素看起来“偏移”，建议统一设box-sizing: border-box
真正容易被忽略的是：居中效果是否“可见”，不等于是否“生效”。调试时先给父容器加个背景色和 border，确认它实际占位高度是否符合预期，再查对齐逻辑——很多问题根本不在 Flex 属性本身，而在高度来源没理清。
