margin: 0 auto 能居中块级元素，但仅当同时满足两个条件：元素为块级（如 display: block）且具有明确宽度（不能是 width: auto）；常见失效原因包括未设宽度、元素为行内级、父容器使用 flex/grid、或元素浮动/绝对定位。
margin: 0 auto 能居中，但只对满足两个硬性条件的块级元素生效：元素必须是块级（display: block 或等效），且必须有明确宽度（不能是 width: auto）。不满足任一条件，它就完全没反应。
为什么 margin: 0 auto 经常“失效”
失效不是 bug，是浏览器按规范执行的结果。最常见原因有四个：
- 目标元素没设
width—— 比如只写了div { margin: 0 auto; }，但没写width，浏览器认为它该占满父容器，无剩余空间可分 - 元素实际是行内元素（如
<span>、<a>）——margin-left/right对行内元素无效，auto更不会起作用 - 父容器用了
display: flex或display: grid—— 子元素变成 flex item 或 grid item，脱离常规文档流，margin: 0 auto行为被覆盖（在 flex 中可能意外触发交叉轴居中） - 元素被设置了
float、position: absolute或position: fixed—— 这些都让它脱离块级格式化上下文，自动外边距逻辑不启动
怎么写才真正生效（含最小可行代码）
只需三步，缺一不可：
- 确保元素是块级：
display: block（默认就是，但若从行内标签改来，得显式加） - 给它一个明确宽度：
width: 300px、width: 80%、max-width: 600px都可以，但不能是width: auto或未声明 - 写
margin: 0 auto（等价于margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0;）
例如：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.card {
width: 400px;
margin: 0 auto;
background: #f5f5f5;
padding: 20px;
}
注意：text-align: center 是干扰项——它只影响子内容（文字、图片等），对 .card 自身居中毫无帮助。
和 flex / grid 混用时的典型翻车点
一旦父容器加了 display: flex，子元素即使写了 margin: 0 auto，也不会水平居中，而是可能被拉到垂直方向中心（如果主轴是水平的话）。这不是 bug，是 flex 布局接管了外边距行为。
此时正确做法是：
- 想让整个 flex 容器里的所有子项水平居中 → 在父容器上写
justify-content: center - 只想让某一个子项靠右 → 给它加
margin-left: auto（不是margin: 0 auto） - 坚持用
margin: 0 auto？那得先让子元素退出 flex 上下文：align-self: auto+margin-left: auto; margin-right: auto，但语义混乱，不推荐
兼容性和响应式里容易被忽略的细节
margin: 0 auto 在 IE8+ 都能用，比 flex 兼容性好得多，但有两个坑常被跳过：
-
width: 100%是个陷阱——它让元素撑满父容器，左右没空间，auto就没东西可分；要用就配合max-width，比如width: 100%; max-width: 600px; - 百分比宽度依赖父容器有确定宽度；如果父容器是
width: 0或被overflow: hidden截断，子元素的80%可能算出来是 0 - 别用
width: fit-content或width: max-content—— 部分浏览器（尤其旧版 Safari 和 Firefox）不把它当作“明确宽度”，margin: 0 auto不触发
真正稳妥的宽度写法只有三种：px 固定值、%（且父宽可控）、或 min/max-width 组合。
