必须同时使用justify-content: center和align-items: center，且父容器需设display: flex和明确高度（如min-height: 100vh），否则仅水平居中而垂直仍贴顶；因前者控主轴（默认水平），后者控交叉轴（默认垂直），缺一不可，且仅作用于直接子元素。
Flexbox 实现水平垂直居中，justify-content: center 和 align-items: center 必须同时存在，且父容器必须有明确高度——缺一不可，否则看起来“没反应”。
为什么只写 justify-content: center 不行
它只控制主轴对齐，默认 flex-direction: row 时主轴是水平的，所以只管水平居中；垂直方向属于交叉轴，不生效。常见现象是：元素水平居中了，但顶部紧贴父容器上边缘。
-
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; } - 别误用
align-content: center：它只在flex-wrap: wrap多行时控制行间距，单行完全无效
子元素用了 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 干扰；一旦子元素脱离弹性上下文，整个对齐逻辑就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
