margin: auto 水平居中仅对块级元素且设置明确width（非auto、100%或max-width）时生效；行内元素、未设宽块元素或display被修改为inline/inline-block的元素均不适用，推荐flex布局替代。
为什么 margin: auto 对某些元素无效
根本原因不是写错了，而是 浏览器计算 只要元素是块级（默认 注意以下几点： 立即学习“前端免费学习笔记（深入）”； 如果目标只是水平居中，且兼容性允许（现代项目基本没问题），直接用 优势在于： 不过要注意：旧版 iOS Safari 对 即使写了 最省事的排查顺序：关掉所有浮动/定位 → 确保块级 + 显式 margin: auto 居中只对「块级元素」且「有明确宽度」生效。常见踩坑点：行内元素（如 ）、未设 width 的 display 被改成 inline / inline-block 但没配 text-align。auto 的逻辑是：左右 margin 均分剩余空间，但前提是容器宽度已知、元素本身宽度固定——否则“剩余空间”无法确定。必须设置
width 才能生效display: block），加一个明确的 width 就能触发居中：div {
width: 300px; /* 必须指定，不能是 auto 或 100% */
margin: 0 auto; /* 上下 0，左右 auto */
}
width 不能是 auto（这是默认值，等同于不设）width: 100% 不行——它撑满父容器，左右无剩余空间可分px 或 rem），否则仍可能失效max-width 替代 width 不起作用，margin: auto 不响应 max- 类属性flex 或 grid 是更可靠的替代方案
display: flex 更稳妥：.container {
display: flex;
justify-content: center; /* 水平居中 */
}
width
inline 元素也有效（自动转为 flex item）padding 或 border 导致的偏移问题align-items: center）flex 的 margin: auto 支持不稳定，若需兼容到 iOS 9 以下，仍建议回归传统盒模型+显式 width。其他常见干扰因素
width 和 margin: auto，仍不居中？检查这些：
text-align: center？这对 inline 元素有效，但对块级无影响；误加可能掩盖真实问题float: left/right）？浮动元素脱离文档流，margin: auto 失效position: absolute 定位？此时 margin: auto 仅在同时设了 left/right 时才居中，且行为和普通流不同display: table-cell？这时得用 vertical-align: middle 配合，margin: auto 无效width → 检查父容器有没有意外的 padding 或 overflow: hidden 截断。
