最可靠方案是display: flex+justify-content: center+align-items: center，但父容器必须有明确高度（如height: 100vh），否则垂直居中失效；margin: 0 auto仅水平生效，因标准流中垂直auto被忽略。
直接说结论：用 display: flex + justify-content: center + align-items: center 是最可靠、最少坑的方案，但必须确保父容器有明确高度上下文（比如 height: 100vh），否则垂直居中会失效。
为什么 margin: 0 auto 只能水平居中，垂直不起作用？
因为 margin: 0 auto 依赖块级元素的「块格式化上下文」，它只对水平方向的自动外边距生效；垂直方向的 margin: auto 在标准流中被忽略——浏览器不计算它的解析逻辑。即使你给子 div 加了 height 和 margin: auto，只要父容器没设高度或没脱离标准流，它就还是贴着顶部。
- 只适用于宽度固定的块级元素（如
width: 300px） - 父容器不能是
height: auto（即由内容撑开） - 完全无法控制垂直位置，别硬套
display: flex 居中时，body 或父容器漏掉哪些属性会失败？
常见失效不是 Flex 写错了，而是父容器“没资格当 Flex 容器”——缺高度、有默认 margin、没重置继承行为。典型报错现象是：元素卡在左上角，或者只水平居中、垂直偏高。
- 漏
height: 100vh：body默认高度由内容决定，align-items: center没参考系，垂直对齐无从谈起 - 漏
margin: 0：浏览器给body默认margin: 8px（各浏览器略有差异），导致整体下移/右移，视觉上“偏了” - 只写
justify-content: center忘了align-items: center：这是新手最高频遗漏，Flex 的两个轴是独立控制的
文本内容在 div 里居中，要不要额外处理 line-height？
不需要。用 Flex 居中时，文本是作为弹性项目（flex item）参与布局的，align-items: center 会直接按内容盒（content box）的基线区域对齐，和 line-height 无关。强行设 line-height: 100vh 反而会导致换行错乱、响应式失常。
- 多行文本、
span、p标签都一样适用，无需包裹额外标签 - 如果内部有
img或button等替换元素，Flex 同样能统一居中，不用单独调vertical-align - 注意：若子元素设了
align-self: flex-start，会覆盖父级align-items，排查时看 computed styles 更准
兼容性与替代方案的取舍要点
现在（2026 年）display: flex 在所有主流浏览器包括 iOS Safari 14.5+、Android Chrome 72+ 都已稳定支持。真正需要 fallback 的场景极少，除非你明确要支持 IE11 或更老内核。
- IE11 下
flex有部分属性 bug（如align-items: center对某些 inline 元素失效），此时可用position: absolute+transform: translate(-50%, -50%) -
place-items: center（Grid 方案）更简洁，但 Safari 15.4 之前有兼容问题，不建议在需要精确控制的老项目中混用 - 绝对定位方案要小心：父容器必须
position: relative，且top: 50%是相对于父容器高度计算的——如果父容器高度为auto，结果仍是不可控的
真正容易被忽略的是：居中效果是否随视口缩放、字体大小调整、或动态插入内容而偏移。验证时别只看初始渲染，要拖动窗口、切到移动端模拟器、再加几段文字试试——Flex 的健壮性就体现在这里，而不是写完一行 CSS 就以为万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
