text-align: center 失效主因是父容器被设为 float、flex 或 absolute，导致该属性失效；同时需检查 img 是否为 inline、父容器是否塌陷、是否混入块级元素等。

为什么 text-align: center 突然不生效

它只作用于父容器，且只影响行内级子元素——<img> 默认是 inline，所以理论上该管；但一旦父容器被主题、插件或自定义 CSS 加了 float、display: flex 或 position: absolute，这个属性就静默失效。

常见翻车点：

• WordPress 古腾堡编辑器里裸写 <img>，没包在 <figure class="wp-block-image aligncenter"></figure> 里，Zakra 主题的居中规则压根不触发
• 父容器用了 font-size: 0 清除 inline 间隙，导致图片高度塌缩或视觉偏移
• 父容器里混了 <p></p> 或 <div> 这类块级子元素，它们不受 <code>text-align 影响，却把图片“挤”到一边

  margin: 0 auto 写了但图片仍靠左

  根本原因：浏览器认为没有“剩余空间”可分配。这个组合必须同时满足三个硬条件，缺一不可。

  检查清单：

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • <img> 是否加了 display: block？没加就等于没写 margin: 0 auto
  • 父容器是否塌陷？比如空 <div> 或仅含浮动子项，<code>computed width 是 0px，auto 就无参照
  • 图片是否设了 width: 300px 这类固定值？max-width: 100% 本身不提供确定宽度，margin: 0 auto 在现代浏览器中对它基本无效
  • 父容器是否用了 display: flex 或 display: grid？它们会接管子项 margin 行为，直接忽略

  Flex 布局里 justify-content: center 看似写了却不居中

  这不是代码漏写，而是父容器没通过“flex 启动三要素”校验：它必须同时具备 display: flex、justify-content: center、以及一个**可计算的主轴尺寸**（通常是宽度）。

  更隐蔽的问题在交叉轴（垂直方向）：

  • 如果只想要水平居中，align-items: center 不必加；但若加了又没配高度，图片会贴顶——不是居中失败，是“垂直方向没空间可居中”
  • 父容器若用 min-height: 200px，但图片加载前 DOM 已渲染，旧版 Safari 或 Android WebView 可能按 0px 高度计算 align-items
  • <img> 自身加了 float: left 或 position: absolute，它已脱离 flex 流，整个居中逻辑自动跳过

  如何快速定位样式覆盖源

  别猜，直接看 computed styles。重点盯三处：

  • 父容器的 display 值：是不是被插件强制设成了 flex 或 inline-block？
  • 父容器的 width 和 max-width：computed 后是否为预期值？如果是 auto 或 0px，说明上下文缺失
  • <img> 的 display 和 margin：是否被更高权重规则覆盖？比如 Zakra 主题的 .wp-block-image img 规则比你内联样式优先级高

  临时验证法：在 DevTools 里手动禁用父容器所有 float、position、display 相关声明，再逐个开回来，观察哪条一启用就破坏居中——那条就是真凶。