margin: 0 auto 居中仅对块级元素且设明确宽度时生效；行内元素、flex/grid子项、浮动或绝对定位元素均不适用，正确写法需同时满足块级、明确宽度、margin: 0 auto 三条件。
margin: 0 auto 能居中，但只对同时满足「块级元素」和「明确宽度」的元素生效；其他情况看似写了却没反应，不是 bug，是浏览器严格按规范执行的结果。
为什么 margin: 0 auto 经常“不生效”
失效根本原因不是写错了，而是两个硬性条件缺一不可：
- 目标元素没设
width—— 比如只写了.box { margin: 0 auto; }，但没声明宽度，浏览器默认按width: auto处理，即占满父容器，左右无剩余空间可分 - 元素实际是行内级（如
<span></span>、<a></a>）——margin-left/right对行内元素无效，auto更不会计算 - 父容器用了
display: flex或display: grid—— 子元素变成 flex item / grid item，脱离常规文档流，margin: 0 auto的自动分配逻辑被忽略（在 flex 中可能意外触发交叉轴居中，但不是你想要的水平居中） - 元素被
float、position: absolute或position: fixed脱离了块级格式化上下文 —— 此时它不再参与块级流的外边距分配
margin: 0 auto 正确写法的最小可行组合
三步必须全做，顺序不重要，但缺一不可：
- 确保元素是块级：显式加
display: block（<div> 默认就是，但若从 <code><span></span>改来，必须加） - 给它一个明确宽度：可以是
width: 300px、width: 80%、max-width: 600px，但不能是width: auto或完全不写 - 写
margin: 0 auto（等价于margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0;）
例如：
.card {
width: 400px;
margin: 0 auto;
background: #f5f5f5;
padding: 20px;
}
注意：text-align: center 是干扰项——它只影响子内容（文字、图片等），对 .card 自身居中毫无帮助。
常见误用场景与替代方案
当 margin: 0 auto 不适用时，别硬套，换思路：
- 想居中文本内容？直接用
text-align: center，作用对象是内容，不是容器本身 - 父容器已是
display: flex？删掉margin: 0 auto，改用justify-content: center - 需要垂直+水平居中且宽高固定？用
position: absolute+top: 0; bottom: 0; left: 0; right: 0; margin: auto;，但必须同时设width和height - 要兼容老浏览器（IE9 及以下）？避免
flex，可用table-cell+vertical-align: middle配合text-align: center
真正容易被忽略的是：margin: 0 auto 的「自动」只发生在水平方向，且只在块级流中起效；一旦脱离这个上下文，它就彻底沉默——不是失效，是压根没被调用。
