margin: 0 auto 必须搭配明确 width（如300px或80%）且元素为块级才生效；若width为auto、100%或元素脱离文档流（如float、absolute）、父容器为flex/grid，则完全失效。
margin: 0 auto 必须搭配明确 width 才生效
它不是“写了就居中”，而是浏览器要算出左右各留多少空白——没 width，就等于没给出被减数，auto 直接退化为 0。
-
width不能是auto或不写；可以是width: 300px、width: 80%、max-width: 600px，但不能是width: 100%（没剩余空间） - 元素必须是块级：
<div>默认满足，但若从<span>改来，得加display: block - 父容器宽度必须大于子元素宽度，否则无空间可分
哪些情况会让 margin: 0 auto 完全失效
不是代码写错了，是布局上下文变了——浏览器按规范执行，结果就是“不动”。
- 元素用了
float、position: absolute或position: fixed：脱离文档流后，margin: auto的分配逻辑被跳过 - 父容器是
display: flex或display: grid：子元素变成 flex item / grid item，margin: 0 auto在主轴上被忽略（可能意外影响交叉轴，但不是你想要的水平居中） - 元素是行内级（如
<span>、<a>）：margin-left/right对它无效，auto更不会计算 - 子元素是
<img>：默认是 inline，得先加display: block
别和 text-align: center 混用
text-align: center 控制的是**内容对齐**，不是容器自身位置。给一个 <div> 同时写 text-align: center 和 margin: 0 auto，前者对它自己毫无作用。
- 想居中文本、图片、链接等行内内容？只用
text-align: center在父容器上 - 想居中整个
<div>块？删掉text-align，专注width+margin: 0 auto - 如果父容器用了
display: flex，text-align会被完全忽略
兼容性和副作用比想象中更敏感
看似最“老派”的方案，反而最容易因细微改动翻车。
立即学习“前端免费学习笔记（深入）”；
- IE9+ 支持没问题，但 IE10/11 对 flex 的
justify-content有 bug；而margin: 0 auto在 IE6+ 都稳，前提是没踩上面那些坑 - 别在
<body>直接套margin: 0 auto：它只对第一个子块生效，后面所有块都会左对齐 - 响应式场景下，
width: 80%比width: 400px更安全，但要注意最小宽度是否仍小于父容器
margin: 0 auto 本身，而在它前面那行没写的 width，或旁边多写的 float。 
