父容器必须有明确高度且子元素不能脱离文档流才能使 align-items: center 生效；推荐 min-height: 100vh 或 100dvh，避免使用 position: absolute 等导致子元素退出 flex 上下文。
直接写 display: flex、justify-content: center、align-items: center 就能实现，但 90% 的失败不是属性写错，而是父容器没高度或子元素脱离了文档流。
父容器必须有可计算的交叉轴尺寸
默认 flex-direction: row 时，交叉轴是垂直方向，align-items: center 需要一个明确的高度才能生效。如果父容器 height: auto 或完全没设高，浏览器算不出“中间在哪”，就静默失效。
- 推荐用
min-height: 100vh（比height: 100vh更安全，内容超长不截断） - 若父容器是
，记得同步加html, body { height: 100%; margin: 0; } - 用开发者工具检查父容器 computed 高度——如果是
0px，那就肯定不居中 -
100dvh在 iOS Safari 中更稳（地址栏收起/展开时不跳变），不支持时可 fallback 到 JS 动态设置
子元素不能脱离 flex 上下文
justify-content 和 align-items 只对弹性容器的**直接子元素**生效，且该子元素必须在文档流中。一旦脱离，整个对齐逻辑就断了。
-
position: absolute、position: fixed、float都会让子元素退出 flex item 身份 - 嵌套结构如
<div class="outer"><div class="inner"><div class="target"></div></div></div>，.target不受.outer的align-items控制 - 解决方法：要么扁平化 DOM，要么让中间层（如
.inner）也加display: flex; justify-content: center; align-items: center; - 别给子元素加
margin: auto还同时设position: absolute——这既冗余又不可靠，top/bottom上的margin: auto在 Safari 中基本无效
flex-direction 改变后，justify-content 和 align-items 的作用会互换
这不是 bug，是 Flex 的设计逻辑：两个属性始终绑定主轴和交叉轴。记清楚主轴由 flex-direction 决定，就能避免“明明写了 center 却没效果”的困惑。
- 默认
flex-direction: row→ 主轴水平 →justify-content管水平，align-items管垂直 - 改成
flex-direction: column→ 主轴变垂直 →justify-content就管垂直，align-items反而管水平 - 不建议为居中而强行改主轴方向，容易混淆语义；保持
row，专注把父容器高度撑起来更稳妥 - 多行场景（
flex-wrap: wrap）下，align-content: center才控制“所有行整体”在交叉轴上居中；单行时它完全无效
真正卡住人的，从来不是这三行 CSS 怎么写，而是花十分钟排查父容器的 margin、padding、overflow，甚至祖先元素的 display 是否意外干扰了高度计算——这些细节不显眼，却让 align-items: center 静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
