margin: 0 auto 水平居中需满足三条件：元素为块级、显式设置 width（或 max-width）、父容器有明确宽度；在 flex/grid 中失效，垂直居中无效，旧版 ie 有兼容问题。
块级元素水平居中，用 margin: 0 auto 就够了；但“HTML margin 居中”本身是个误导性说法——margin 是 CSS 属性，不在 HTML 里写。
为什么 margin: 0 auto 有时不生效
这是最常卡住人的地方：看起来写了，但元素就是不居中。核心原因就两个：
- 元素没设
width（或max-width），auto没有计算基准，浏览器默认铺满父容器 - 元素不是块级（比如
<span></span>、<a></a>默认是 inline），margin-left/right: auto对 inline 元素无效 - 父容器没设定宽度，或用了
display: flex/display: grid等现代布局，margin: 0 auto会被覆盖或忽略
示例：下面这段代码不会居中
div {
margin: 0 auto;
}
因为没设 width，也没强制块级显示。改成这样才有效：
立即学习“前端免费学习笔记（深入）”；
div {
width: 300px;
margin: 0 auto;
}
margin: auto 在 Flex 布局里失效？
在 display: flex 容器中，子元素的 margin: auto 行为完全不同——它会沿主轴和交叉轴同时拉伸占位，变成一种“自动对齐”手段，而不是传统意义上的居中。
- 只写
margin: auto：子元素会在 flex 容器内完全居中（水平+垂直） - 写
margin-left: auto：子元素右对齐（主轴方向） - 但此时再写
width+margin: 0 auto就多余了，flex 的justify-content和align-items更直接
所以别混用：要么用传统块级 + margin: 0 auto，要么用 flex + justify-content: center，别指望两者叠加增强效果。
IE8 及更老浏览器的兼容陷阱
margin: 0 auto 在 IE6–8 中基本可用，但有两个经典坑：
- 触发 hasLayout：如果父容器是
inline或未设width，IE7 及以下可能不认auto，需加zoom: 1或display: inline-block - 文本方向影响：在
direction: rtl下，某些旧版 IE 会把margin: 0 auto当成右对齐处理 - 不要用
margin: auto做垂直居中——它只对水平有效，垂直方向margin: auto在块流中无意义（除非是 flex/grid 子项）
真正容易被忽略的是：居中从来不是单靠一个 margin 能搞定的事，得看上下文是块流、flex、grid 还是绝对定位。写之前先确认容器的 display 类型和尺寸约束，比死记“margin: 0 auto”有用得多。
