父容器必须设min-height，不是可选而是刚需；因align-items:center依赖交叉轴有可计算长度，height:auto且内容空时高度为0，居中静默失效，故需min-height:100vh等明确高度基准。
父容器必须设 min-height，不是可选而是刚需
只要子元素高度未知，align-items: center 就完全依赖父容器在交叉轴（默认为垂直方向）上有可计算的长度。如果父容器 height 为 auto 且内容为空或极短，它实际高度就是 0，此时 align-items 静默失效——子元素会贴在顶部，开发者工具里也看不到报错。
实操建议：
-
min-height: 100vh是最常用解法，比height: 100vh更安全：内容超长时不会被截断，也不会触发滚动条消失等诡异行为 - 移动端优先用
min-height: 100dvh，能响应 Safari 地址栏收放；iOS 旧版可加min-height: -webkit-fill-available兜底 - 若父容器是
<body>，必须同步确保html, body { height: 100%; margin: 0; }，否则高度链断裂
justify-content 和 align-items 必须同时写 center
这不是“习惯”，而是功能分工决定的：justify-content 管主轴对齐，align-items 管交叉轴对齐。默认 flex-direction: row 时，主轴水平、交叉轴垂直，所以二者缺一不可。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 只写
justify-content: center——结果只有水平居中，垂直方向毫无反应 - 误以为
text-align: center能居中块级子元素——它只影响内联内容，对<div>类子元素完全无效 - 改了
flex-direction: column却没调整对齐属性，导致原本管水平的justify-content突然开始控制垂直方向
子元素不能脱离文档流，否则 flex 对齐彻底失能
Flex 布局只对**弹性容器的直接子元素**生效，且该子元素必须处于文档流中。一旦用了 position: absolute 或 float，它就不再是 Flex Item，align-items 对它完全不作用。
常见场景与解法：
- DOM 结构嵌套多层（如
<div class="container"><div class="wrapper"><div class="box"></div></div></div>），则.box不受.container的align-items控制；要么扁平化结构，要么让.wrapper也加display: flex; justify-content: center; align-items: center - 需要模态框遮罩层时，遮罩层用
position: fixed是合理的，但其中的弹窗内容应放在一个独立的、带 flex 居中的子容器里，而不是直接在 fixed 元素上设align-items
盒模型细节会让视觉居中“偏移”几像素
Flex 居中计算的是内容区（content box）中心，但 padding、border、margin 都会影响最终呈现位置。比如父容器设了 padding: 20px，子元素虽居中于内容区，看起来却像往下往右偏了 20px。
规避办法：
- 父容器统一加
box-sizing: border-box，让width/height包含padding和border - 子元素避免设
margin——flex 居中不靠它，反而叠加偏移 - 真要留白，就在子元素内部再包一层容器设
padding，而不是直接加在居中目标上 - IE11 下
min-height: 100vh在 flex 容器中解析不准，稳妥起见加-ms-align-items: center，或干脆回退到position: absolute+transform方案
margin、padding、overflow，甚至祖先元素的 display 是否意外干扰了高度传递——这些细节不显眼，却让 align-items: center 静默失效。 
