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">里，Zakra 主题的居中规则压根不触发 - 父容器用了
font-size: 0清除 inline 间隙，导致图片高度塌缩或视觉偏移 - 父容器里混了
<p>或<div>这类块级子元素，它们不受text-align影响，却把图片“挤”到一边
margin: 0 auto 写了但图片仍靠左
根本原因：浏览器认为没有“剩余空间”可分配。这个组合必须同时满足三个硬条件，缺一不可。
检查清单：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img>是否加了display: block？没加就等于没写margin: 0 auto - 父容器是否塌陷？比如空
<div>或仅含浮动子项，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 相关声明，再逐个开回来，观察哪条一启用就破坏居中——那条就是真凶。
