div居中需分水平、垂直、完全居中三类；text-align:center仅对内联内容有效；margin:0 auto需明确width且元素未脱离文档流；flex布局最可靠但父容器须设高度如100vh。
HTML div 居中不生效？先看是哪种居中
居中分三类：水平居中、垂直居中、完全居中（水平+垂直）。div 默认是块级元素，直接写 text-align: center 只对内联内容有效，对它自己没用。常见错误就是把文字居中的思路套在 div 上。
实操建议：
- 如果只是让子元素（比如按钮、图片）在父
div里水平居中：给父div加text-align: center - 如果想让这个
div自己在页面或父容器中水平居中：用margin: 0 auto，但前提是它有明确的width - 如果父容器高度固定，还要垂直居中：别碰
vertical-align（它对div无效），改用display: flex或position: absolute+transform
用 flex 居中 div 最稳，但要注意父容器
display: flex 是目前最可靠的方式，尤其适合完全居中。但它只作用于直接子元素，且依赖父容器设置——很多人忘了给父容器加 height 或设为 100vh，结果“居中了却看不见”。
示例（让一个 div 在视口正中）：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <div style="width: 200px; height: 100px; background: #eee;"></div> </div>
关键点：
-
justify-content: center控制水平，align-items: center控制垂直 - 父容器必须有高度（比如
height: 100vh），否则高度塌缩，align-items失效 - 不要在子
div上同时设margin: auto，它和flex的居中逻辑冲突
margin: 0 auto 水平居中失效？检查这三点
margin: 0 auto 看似简单，但一动不动很常见。根本原因是它只对“具有宽度的块级元素”起作用，而且这个宽度不能是 auto。
典型失效场景：
- 子
div没设width（默认占满父容器，auto宽度无法居中） - 子
div被设了float或position: absolute，脱离文档流 - 父容器用了
display: inline-block之类，导致计算上下文异常
修复方式很简单：加个确定的 width，比如 width: 300px 或 width: fit-content（注意 fit-content 在旧版 Safari 需加前缀）。
IE 兼容时别用 flex 或 transform 居中
如果项目还要支持 IE10/11，flex 的 align-items: center 有兼容问题（尤其是嵌套 flex 容器），transform: translate(-50%, -50%) 也容易偏移。
更稳妥的老方案：
- 父容器设
text-align: center+line-height等于容器高度（仅限单行、高度固定的场景） - 用
position: absolute+top: 50%+left: 50%+margin负值（需知道子元素宽高） - 或者退一步，用
display: table-cell+vertical-align: middle（兼容性好，但语义略重）
真正麻烦的不是写法本身，而是不同浏览器对“高度继承”和“百分比计算”的处理差异——测试时别只看 Chrome，打开 IE 或旧 Edge 真机跑一遍。
