必须同时设 justify-content: center 和 align-items: center，且父容器要有可计算的高度，否则垂直方向无效；justify-content 只控制主轴（默认水平），align-items 才控制交叉轴（默认垂直），二者方向随 flex-direction 动态变化。
必须同时设 justify-content: center 和 align-items: center，且父容器要有可计算的高度，否则垂直方向根本不会动。
为什么只写 justify-content: center 不行
它只管主轴（默认是水平方向），元素会水平居中，但垂直方向仍按默认的 align-items: stretch 拉伸，或 flex-start 贴顶。常见现象就是“文字水平居中了，却死死顶在容器最上方”。
- 检查浏览器开发者工具里父容器的
computed height，如果为0px或接近内容高度，align-items就没作用对象 - 别指望子元素自己“撑高”父容器——
align-items: center需要的是父容器交叉轴有明确尺寸，不是靠内容反推 - 若父容器是
body，记得链式重置：html, body { height: 100%; margin: 0; }
align-items 没反应？先看父容器有没有“真高度”
最常踩的坑：父容器写了 height: 100%，但它的祖先没设高度，或者用了 position: absolute 却忘了最近定位祖先也得有高。
- 移动端 Safari 对
100vh有缩放 bug，可用min-height: -webkit-fill-available兜底 -
height: auto+overflow: hidden可能截断内容，导致父容器实际高度塌缩 - 用
min-height: 100vh比单纯height: 100vh更安全，尤其当内容可能超出时
justify-content 和 align-items 的方向会随 flex-direction 互换
别硬记“justify 是水平、align 是垂直”——它们永远分别对应主轴和交叉轴。一旦改了 flex-direction: column，两者物理方向就翻转了。
立即学习“前端免费学习笔记（深入）”；
- 想让单个子元素垂直居中？用
justify-content: center+flex-direction: column - 想让多行 flex 容器里的所有行整体垂直居中？那是
align-content: center的事，align-items管不了行间距 - 子元素是纯文本（内联元素）时，
align-items: center可能受基线对齐干扰，加display: inline-block或包一层div更稳
绝对定位子元素会绕过 Flex 居中逻辑
只要子元素设了 position: absolute，它就脱离文档流，justify-content 和 align-items 对它完全失效。
- 这种情况该用父容器
position: relative+ 子元素top: 50%; left: 50%; transform: translate(-50%, -50%) - 别给绝对定位元素写
margin: auto——在 flex 容器里它不触发居中行为 - 如果父容器本身是 flex 容器，又想某个子项绝对定位，那它的居中就得单独处理，和 flex 对齐无关
真正卡住人的往往不是属性名记不住，而是 computed height 看一眼就忽略，或者把 align-content 当成 align-items 的同义词乱用。
