Flexbox居中需同时设display: flex、父容器有高度（如100vh）、子元素不脱离文档流；justify-content与align-items必须共用才能双向居中，且仅作用于直接子元素。
Flexbox 是当前最可靠、代码最少的居中方案，但必须同时满足三个条件：父容器设 display: flex、明确高度（如 height: 100vh）、子元素不能脱离文档流。
为什么 justify-content: center 和 align-items: center 必须一起用
默认 flex-direction: row 时，justify-content 控制水平（主轴），align-items 控制垂直（交叉轴）。只写一个只能单向居中，视觉上仍是偏的。
-
justify-content: center单独用 → 子元素水平居中，但顶部贴着父容器上边缘 -
align-items: center单独用 → 子元素垂直居中，但左边缘贴着父容器左边缘 - 两者缺一不可，且都只对直接子元素生效；嵌套两层后需在中间容器上重复设置
- 若父容器
flex-direction: column，则角色互换：justify-content管垂直，align-items管水平
父容器没高度，align-items: center 就“失效”
这不是 bug，是 Flex 的正常计算逻辑：align-items 依赖交叉轴（垂直方向）有可分配空间。若父容器高度由内容撑开（height: auto 或未设高），交叉轴长度为 0，自然无法居中。
- 推荐用
height: 100vh或min-height: 100vh—— 后者更安全，避免内容超长时被截断 - 若父容器是
，记得同步重置：html, body { height: 100%; margin: 0; } - 不要用
min-height替代height来“骗”align-items，它仍需要一个可计算的交叉轴尺寸 - 检查是否误用了
align-content: center：它只在多行换行（flex-wrap: wrap）时控制行间距，单行完全无效
子元素是 position: absolute，Flex 居中就彻底失效
绝对定位元素已脱离文档流，不再属于 Flex 项目，justify-content 和 align-items 对它零影响。此时看起来“没反应”，其实是它根本不在 Flex 的作用范围内。
- 常见误操作：给子元素加
position: absolute同时又指望父容器用 Flex 居中它 - 若必须用绝对定位（比如 tooltip、弹窗浮层），请改用
position: relative+transform: translate(-50%, -50%)方案 - 注意：Flex 容器内混用
margin: auto和justify-content可能冲突；margin: auto在 Flex 中虽能居中，但在 IE10–11 中垂直方向支持不完整
兼容性与降级要点
Flexbox 在 IE10+ 可用，但 IE10/11 需手动加前缀；Grid 的 place-items 则完全不支持 IE。实际项目中别幻想“自动降级”，得主动处理。
- IE10 要加：
-ms-flex-pack: center; -ms-flex-align: center; - IE11 还需补：
display: -ms-flexbox;（不能只靠 Autoprefixer 自动生成） - 别在同一容器上混写
display: flex和display: grid，后者会完全覆盖前者 - 若用
margin: auto实现居中，务必测试 IE11 下是否垂直方向失效——真要兼容，老老实实用双属性+前缀
真正容易被忽略的点不是语法，而是上下文：父容器有没有高度、子元素还在不在文档流里、浏览器到底认不认那个前缀。写完三行 CSS 后，先打开开发者工具看 computed 样式里 align-items 是否被应用，再查父容器的 height 值是不是预期的数字——比反复改代码更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
