必须同时设display: flex、min-height: 100vh（或100dvh）和justify-content: center+align-items: center，且子元素不能脱离文档流；因justify-content仅控主轴（默认水平），垂直居中必须依赖align-items对交叉轴的控制。
直接写 display: flex + justify-content: center + align-items: center 就能实现，但三个条件缺一不可：父容器必须设 display: flex、必须有可计算的高度（比如 min-height: 100vh）、子元素不能脱离文档流。
为什么 justify-content: center 单独写没用
它只控制主轴对齐，默认 flex-direction: row 时主轴是水平方向，所以只居中左右，垂直方向完全不管。常见现象是元素水平居中了，但顶部紧贴父容器上边缘——这不是 bug，是设计如此。
-
justify-content管主轴，align-items管交叉轴；默认情况下主轴水平、交叉轴垂直 - 如果改成
flex-direction: column，两者作用方向会互换 - 这两个属性只对直接子元素生效，中间多一层普通
div就失效
父容器高度塌陷是最常见的失败原因
没有高度，align-items: center 就没空间可分配，结果就是“写了等于没写”。浏览器 computed 样式里能看到 align-items 值是 center，但实际位置没变。
- 别只写
height: 100vh，iOS Safari 地址栏缩放会导致视口高度跳变，优先用min-height: 100dvh - 如果父容器是
，记得同步设html, body { height: 100%; margin: 0; } - 子元素本身有
margin或padding会影响视觉居中，建议先重置或用box-sizing: border-box
子元素脱离文档流会让整个方案失效
position: absolute、float: left、display: inline 这些都会让元素退出 Flex 上下文，justify-content 和 align-items 对它完全无效。
- 绝对定位元素要居中，改用
position: relative+top: 50%+left: 50%+transform: translate(-50%, -50%) - 内联元素（如
<span></span>）必须显式设display: block或display: inline-block才能当 flex item 处理 - 子元素设了
flex-grow: 1会先占满空间，再也没“剩余空间”供align-items分配
真正卡住人的往往不是语法写错，而是 computed 样式里看着都对，却没生效——这时候八成是父容器高度为 0，或者子元素悄悄被 position: absolute 或 float 带离了 Flex 流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
