flexbox水平垂直居中需同时设置justify-content:center和align-items:center，且父容器必须有可计算高度（如min-height:100vh），否则交叉轴无基准导致“静默失效”；子元素若为absolute定位或脱离文档流则完全不受影响。
Flexbox 实现水平垂直居中本身很简单，但“看起来没反应”几乎全是配置缺失导致的静默失效——它不报错，只沉默。
为什么 justify-content: center 单独写没用
它只管主轴对齐，默认 flex-direction: row 时主轴是水平的，所以只影响左右位置；垂直方向属于交叉轴，align-items 才管它。常见现象是：元素水平居中了，但顶部紧贴父容器上边缘。
-
justify-content: center单独用 → 水平居中，垂直位置不变（默认flex-start） - 改用
flex-direction: column后，justify-content就管垂直，align-items才管水平 - 这两个属性都只作用于直接子元素，嵌套一层后中间容器也得设
display: flex
父容器没高度，align-items: center 就“不工作”
这不是 bug，而是 Flex 的计算逻辑：交叉轴（默认为垂直方向）必须有可分配空间，align-items 才能起作用。若父容器 height: auto 或未设高，交叉轴长度为 0，自然无法居中。
- 推荐用
min-height: 100vh（比height: 100vh更安全，防内容溢出截断） - 若父容器是
，记得同步设html, body { height: 100%; margin: 0; } - 别用
min-height“骗”align-items——它仍需要一个可计算的交叉轴尺寸
子元素用了 position: absolute，Flex 居中就彻底失效
绝对定位元素已脱离文档流，不再属于 Flex 项目，justify-content 和 align-items 对它零影响。此时不是“没居中”，而是根本不在 Flex 的作用范围内。
- 若必须用绝对定位（如 tooltip、弹窗），改用
position: relative+transform: translate(-50%, -50%) - 此时需配
top: 50%和left: 50%，且父容器必须有position: relative - IE9 需加前缀：
-ms-transform: translate(-50%, -50%)
最容易被忽略的干扰项
Flex 居中效果可能被子元素自身的 margin、float 或 display: inline-block 干扰；一旦子元素脱离弹性上下文，整个对齐逻辑就断了。
- 检查是否误用了
align-content: center：它只在flex-wrap: wrap且有多行时起作用，单行完全无效 - IE11 对
align-items: center的实现有偏差，尤其对<img>或带vertical-align的内联元素，常出现 1–2px 偏移 - 兼容时建议给子元素用
margin: auto，或改用flex-direction: column+justify-content: center
真正卡住人的从来不是代码多难写，而是父容器高度能不能被浏览器准确计算——漏掉一行 height: 100% 或一个 margin: 0，align-items 就会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
