最稳的现代方案是用 display: flex；父容器需设 display: flex 和明确高度，子元素垂直居中用 align-items: center，水平居中用 justify-content: center，或单子元素用 margin: auto。
flex布局让div垂直居中：最稳的现代方案
用 display: flex 是目前兼容性好、行为可预测的首选方式。父容器设为 flex 后，子元素垂直居中只需两行关键声明。
- 父元素必须设置
display: flex，且高度明确（如height: 100vh或固定像素值），否则align-items: center无参照基准 - 垂直居中用
align-items: center（作用于所有子项），水平居中用justify-content: center - 若只有一级子元素，也可对子元素单独设
margin: auto，此时父元素仍需display: flex，但无需写align-items和justify-content - 注意 Safari 旧版本（align-items: center 在单行 flex 容器中的处理有偏差，建议加
flex-direction: column+justify-content: center兜底
margin: auto 垂直居中：仅限绝对定位+宽高已知场景
margin: auto 本身不能让元素在普通文档流中垂直居中，它只有在「绝对定位 + 四边 offset 均为 0」的前提下才触发居中逻辑，且要求子元素有明确的 width 和 height。
- 父元素需设
position: relative - 子元素设
position: absolute; top: 0; left: 0; right: 0; bottom: 0;，再加margin: auto - 子元素必须声明
width和height，否则margin: auto在垂直方向无效（浏览器无法计算可用空间） - 这个技巧本质是利用了绝对定位下「块级元素在四边约束时，auto margin 的解析规则」，不是盒模型常规行为，别误用于 static 或 relative 元素
为什么不要用 display: table-cell + vertical-align
这套方案曾被当作“兼容 IE8”的解法，但现在已不推荐——它引入额外语义、破坏可访问性，并在响应式场景下极易失控。
-
display: table-cell会强制元素表现得像，导致 padding、margin行为异常（例如上下 margin 不生效）vertical-align: middle只对 inline-level 元素或 table-cell 生效，对 block 元素无效；很多人误以为给子 div 加这个就能居中，实际不起作用- 父容器若未设
display: table或table-row，table-cell会触发匿名 box 生成，布局结果难以预期- Flex 已覆盖 IE10+，移动端全覆盖，没必要为极低占比的旧环境牺牲代码清晰度
常见错误：居中失效时先查这三件事
90% 的“flex 居中不工作”问题，都出在基础条件缺失上，而不是写法本身。
- 父元素没有设定高度——
align-items: center需要明确的交叉轴长度，空父容器高度为 0，自然没空间可居中 - 子元素是 inline 元素（如
）且未设display: block或inline-block——flex 项默认按块级处理，但某些 inline 元素在 flex 容器中行为受限 - CSS 优先级被覆盖——检查是否被其他规则（如外部库、重置样式）设置了
align-items: flex-start或flex-direction: row-reverse等干扰项
真正麻烦的不是写法，而是忘记父容器需要一个「可测量的高度基准」。很多开发者卡在这一步，反复调
align-items却忽略 height 或 min-height 的缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
