margin: auto 水平居中失效的根本原因是未满足三前提：元素必须为块级（display: block/inline-block）、必须设置明确 width（max-width 无效）、父容器不能是 flex/table 布局。
用 margin: auto 实现水平居中失效，通常不是写法错了，而是没满足它的前提条件。
元素必须是块级元素
margin: auto 对行内元素（如 span、a）无效。即使写了，浏览器也会忽略。
-
解决方法：给元素加
display: block或display: inline-block（注意：inline-block需配合父容器文本对齐才能真正居中） - 常见错误：直接对
img或button写margin: auto却没设display，导致不生效
元素必须有明确的宽度
如果宽度是 auto（比如默认的块级元素占满父容器），左右 margin 就没有“可分配空间”，auto 就无法计算。
- 解决方法：显式设置
width（如width: 300px或width: 50%） - 特别注意：
max-width不能替代width；只设max-width而不设width，仍可能撑满父容器，导致居中失败
父容器不能是 flex 或 table 布局干扰
如果父元素用了 display: flex，子元素的 margin: auto 行为会改变——它可能变成在 flex 主轴或交叉轴上对齐，而不是传统块流中的水平居中。
- 若父容器是
flex，优先用justify-content: center控制水平居中 - 若父容器是
display: table-cell，则需配合vertical-align: middle和文本对齐，margin: auto不起作用
检查是否被其他 CSS 覆盖或重置
某些 CSS 框架（如 Bootstrap）或重置样式（如 normalize.css）可能设置了 margin: 0 或 display: inline，覆盖了你的规则。
- 用浏览器开发者工具检查该元素的最终
computed样式，确认margin-left和margin-right确实是auto，且display和width符合要求 - 必要时加
!important排查（仅调试用，不推荐线上写）
