margin: 0 auto 没反应是因为未触发块级流居中条件：元素须为块级、有明确宽度（非auto/100%）、且未脱离文档流或处于flex/grid容器中。
margin: 0 auto 为什么经常“没反应”
它不是失效，是根本没被触发——margin: 0 auto 只在块级流中计算左右剩余空间，一旦条件不满足，浏览器就直接忽略该声明，不报错也不提示。
- 元素没设
width（或max-width）：比如只写了.box { margin: 0 auto; }，浏览器按width: auto处理，占满父容器，左右无空间可分 - 元素实际是行内级：
<span></span>、<img>默认不响应margin-left/right: auto，得先加display: block - 父容器用了
display: flex或display: grid：子元素变成 flex item / grid item，margin: 0 auto的自动分配逻辑被绕过 - 元素自身脱离文档流：加了
float、position: absolute或position: fixed，它不再参与块级格式化上下文的外边距计算
margin: 0 auto 正确写法的最小组合
三件事必须同时做，缺一不可，顺序无关：
- 确保元素是块级：显式声明
display: block（<div> 默认就是，但若从 <code><span></span>改来，必须加） - 给它一个明确宽度：可以是
width: 300px、width: 80%、max-width: 600px，但不能是width: auto或完全不写；width: 100%也无效（没剩余空间） - 写
margin: 0 auto（等价于margin-left: auto; margin-right: auto;）
例如：
.card { width: 400px; margin: 0 auto; background: #f5f5f5; padding: 20px; }
text-align: center 不是用来居中块级元素的
这是最常混淆的一点：text-align: center 作用对象是**内容**，不是容器本身。给父容器设这个，只能让里面的文字、<img>、<span></span> 居中，对子 <div> 完全无效。
<ul>
<li>错误写法：<code><div style="text-align: center"><div>我不会居中</div></div>
<div style="width: 200px; margin: 0 auto">我才会居中</div>
text-align 达成效果，得把子元素改成 display: inline-block，再配合父容器 text-align: center
当 margin: 0 auto 不适用时，别硬套
看到居中需求，先判断元素类型和上下文，而不是条件反射写 margin: 0 auto：
- 父容器已是
display: flex？删掉margin: 0 auto，改用justify-content: center - 元素已设
position: absolute？用left: 50%; transform: translateX(-50%)，且父容器必须有position: relative - 要兼容 IE9 及以下？避免 flex，可用
display: table-cell+vertical-align: middle配合text-align: center - 只是想居中文本或图片？直接在父容器上写
text-align: center即可
真正容易被忽略的是：margin: 0 auto 的「自动」只发生在块级流中；一旦脱离这个上下文，它就彻底沉默——不是 bug，是规范使然。
