Flex垂直居中需同时设置display: flex、明确高度及align-items: center；justify-content: center仅控制主轴对齐，主轴为水平时无法实现垂直居中。
Flex 垂直居中只靠 justify-content 是不够的，它只控制交叉轴对齐，必须配合 flex-direction 或 align-items 才能生效。
为什么 justify-content: center 有时没反应
这是最常见的困惑点：写了 justify-content: center，但元素根本没动。根本原因是——justify-content 的作用轴取决于 flex-direction 的值。
- 默认
flex-direction: row→ 主轴水平 →justify-content控制**水平**对齐，align-items才管垂直 - 设成
flex-direction: column→ 主轴变垂直 → 此时justify-content: center才真正控制**垂直**居中 - 如果容器高度没设（比如由内容撑开），即使写了
align-items: center，也可能因父容器无高度而“失效”
align-items 和 justify-content 到底谁管垂直
简单记：垂直方向对齐，优先用 align-items（配合默认 row），更直观、更常用。
-
align-items: center→ 子项在交叉轴（默认为 Y 轴）上居中 → 实现垂直居中 -
justify-content: center→ 子项在主轴（默认为 X 轴）上居中 → 实现水平居中 - 两者同时写，就能实现真正的水平+垂直居中
- 注意：
align-items作用于所有子项；若只想居中某一个，得用align-self: center
常见错误：父容器没设高度或没设 display: flex
Flex 居中不是魔法，它依赖两个硬性前提：
- 父容器必须有明确高度（比如
height: 100vh或min-height: 100vh），否则“垂直空间”不存在，居中无从谈起 - 父容器必须声明
display: flex（或inline-flex），漏掉这句，所有 flex 属性全无效 - 别在子元素上瞎加
margin: auto试图“碰运气”，它在 flex 容器里虽有时有效，但行为不稳定，尤其多子项时容易错乱
示例（可靠写法）：
div.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
移动端或嵌套 flex 时的兼容性提醒
老版本 Safari（iOS 9–10）对 align-items: center 在某些嵌套场景下支持不稳，特别是父容器用了 min-height 而非固定 height 时。
- 稳妥做法：父容器用
height: 100vh（而非min-height），再加overflow: hidden防滚动条干扰计算 - 如果必须用
min-height，可补一句align-content: center（仅对多行 flex 有效，单行无效，但部分旧引擎会把它当 fallback 处理） - 绝对不要依赖
justify-content单独实现垂直居中，除非你明确设了flex-direction: column并确认高度可用
最常被忽略的一点：居中失效时，先打开浏览器开发者工具，鼠标悬停父容器，看它的实际渲染高度是不是 0 —— 很多时候问题根本不在于 flex 写法，而在于父容器本身“塌陷”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
