Flex实现水平垂直居中需display: flex、justify-content: center和align-items: center三者配合，但父容器必须有可计算的交叉轴尺寸（如min-height: 100vh），否则align-items: center因交叉轴长度为0而静默失效。
Flex 实现水平垂直居中，三行 CSS 就够了，但 90% 的失败不是写错代码，而是父容器没高度——align-items: center 在交叉轴长度为 0 时完全静默失效，不报错、不警告，只“不动”。
为什么 align-items: center 看起来没反应
它只作用于交叉轴（默认是垂直方向），而该轴必须有可计算的尺寸才能分配空间。如果父容器 height: auto 或未设高，浏览器算出的交叉轴长度就是 0，自然无法居中。
- 用开发者工具检查父容器的
Computed面板，看height和min-height是否为0px - 别依赖内容撑高：文字或空
div不会自动给父容器提供可靠高度 - 推荐用
min-height: 100vh，比height: 100vh更安全，防内容溢出截断 - 若父容器是
<body>，必须同步设html, body { height: 100%; margin: 0; }
justify-content 和 align-items 必须一起写
前者管主轴（默认水平），后者管交叉轴（默认垂直）。只写一个，只能单向居中；漏掉任一，效果就残缺。
-
justify-content: center单独存在 → 元素水平居中，但垂直位置仍是flex-start（贴顶） -
align-items: center单独存在 → 垂直居中，但水平位置仍是flex-start（贴左） - 两者都设在
display: flex的父容器上，子元素才真正“钉在中心” - 不要误用
align-content: center：它只在flex-wrap: wrap且有多行时生效，单行无效
子元素用了 position: absolute 还能居中吗
不能。绝对定位元素已脱离文档流，不再是弹性项目（Flex Item），justify-content 和 align-items 对它完全无效。
立即学习“前端免费学习笔记（深入）”；
- 现象：父容器写了全部三行，但子元素仍在左上角，控制台无提示
- 检查点：看子元素 computed 样式里
position是否为absolute或fixed - 若必须用绝对定位（如弹窗、tooltip），改用
top: 50%; left: 50%; transform: translate(-50%, -50%) - 此时父容器需加
position: relative，否则top/left会向上找最近已定位祖先
嵌套一层后居中失效，怎么办
Flex 对齐只作用于**直接子元素**。如果 DOM 是 <div class="container"><div class="wrapper"><div class="box"></div></div></div>，那么 .box 不受 .container 的 align-items 控制。
- 扁平化结构最简单：
<div class="container"><div class="box"></div></div> - 保留嵌套时，中间层（如
.wrapper）也得设display: flex; justify-content: center; align-items: center - 注意：子元素若设了
flex-grow: 1，它会先占满空间，margin: auto就没剩余空间可吞了 -
margin: auto在 Flex 容器中确实能居中，但仅限单个子元素，且仍依赖父容器有高度
真正卡住人的，从来不是属性名记不住，而是花十分钟在开发者工具里反复点开父容器的 Computed 面板，确认 height、min-height、display、position 这几个值是否真如你所想——它们不显眼，却决定 align-items: center 是工作还是沉默。
