margin: 0 auto 居中需同时满足三条件：块级元素、明确宽度、未脱离文档流；缺一即不触发左右 margin 分配逻辑，非 bug 而是规范执行。
margin: 0 auto 能居中，但只在三个硬条件同时满足时才起作用：元素是块级、有明确宽度、未脱离常规文档流。缺一不可，不是 bug，是浏览器严格按规范执行的结果。
为什么 margin: 0 auto 经常“没反应”
失效不是写错了，而是浏览器根本没进入「分配左右 margin」的计算逻辑：
- 目标元素没设
width—— 比如只写了.box { margin: 0 auto; }，浏览器按width: auto处理，占满父容器，左右无空间可分 - 元素实际是行内级（如
<span>、<img>）——margin-left/right对行内元素无效，auto更不会计算 - 父容器用了
display: flex或display: grid—— 子元素变成 flex item / grid item，margin: 0 auto的自动分配逻辑被忽略 - 元素被
float、position: absolute或position: fixed脱离了块级格式化上下文 —— 它不再参与块级流的外边距分配
margin: 0 auto 正确写法的最小可行组合
三步必须全做，顺序不重要，但缺一不可：
- 确保元素是块级：显式加
display: block（<div>默认就是，但若从<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;）
例如：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
.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，可用
display: table-cell+vertical-align: middle配合text-align: center
真正容易被忽略的是：margin: 0 auto 的「自动」只发生在水平方向，且只在块级流中起效；一旦脱离这个上下文，它就彻底沉默——不是失效，是压根没被调用。
