margin: 0 auto 不生效是因为未满足三个硬性条件：元素必须为块级、必须有明确宽度（不能是auto或100%）、不能脱离文档流（禁用float/absolute）；否则浏览器不计算剩余空间，直接忽略。
margin: 0 auto 为什么经常不生效
它不是“失效”，而是根本没触发计算条件。浏览器只有在元素有明确宽度、且该宽度小于父容器时，才会把剩余空间均分给左右 margin。否则，margin: 0 auto 就是空操作。
常见错误现象：
-
div写了margin: 0 auto却靠左贴边——大概率没设width，或设成了width: 100% -
img加了margin: 0 auto没反应——img默认是 inline 元素，margin-left/right: auto对它无效 - 父容器用了
display: flex或display: grid，子元素的margin: 0 auto完全被忽略
必须同时满足的三个条件
缺一不可，否则不居中：
- 元素必须是块级（
display: block、display: table等），不能是inline或inline-block（除非你主动改） - 必须显式设置
width（或max-width），且值不能是auto或100%；推荐用具体像素或百分比（如width: 300px或width: 80%） - 元素不能脱离文档流：不能有
float、position: absolute、position: fixed
示例有效写法：
div.center-box { width: 400px; margin: 0 auto; }
如果它是 img，得加 display: block：
img.center-img { display: block; width: 200px; margin: 0 auto; }
和 flex 布局混用会怎样
别混。一旦父容器设了 display: flex，子元素的 margin: 0 auto 就不再起水平居中作用——它会变成一种“轴向拉伸”行为，甚至可能把元素撑满整个容器。
更关键的是：justify-content: center 和 margin: 0 auto 在 flex 容器里是互斥逻辑，不是叠加增强。强行共存只会让布局不可预测。
如果你已经用了 flex，就该删掉子元素上的 margin: 0 auto，统一用 justify-content 控制主轴对齐。
兼容性与适用边界
margin: 0 auto 在 IE8+ 都能正常工作，是少数能兼顾老项目和简单场景的方案。但它只管水平，不管垂直；只适用于单个块级元素，不适合多列、响应式网格或需要动态尺寸的场景。
真正容易被忽略的一点：当父容器本身没有明确宽度（比如未设 width 的 body 或浮动容器），margin: 0 auto 也会失去参照基准——它依赖父容器的“可用宽度”来算剩余空间，没这个基准，就无从分配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
