最稳做法是给<img>设display: block和margin: 0 auto；若混排文本流，优先父容器text-align: center；需双向居中则用父容器display: flex; justify-content: center; align-items: center。
直接给 <img> 加 margin: 0 auto 或 text-align: center 很可能无效——不是代码写错了，而是没满足前提条件。
为什么 margin: 0 auto 对图片不起作用
浏览器默认把 <img> 当作行内元素，而 margin: 0 auto 只对块级（display: block）或替换类块级元素生效。常见错误包括：
- 漏写
display: block，只加了margin: 0 auto - 父容器是
display: flex或float，覆盖了margin行为 - 图片本身设了
position: absolute或float: left，脱离文档流 - 父容器没有明确宽度（比如空
<div>），导致“auto”无参照可分
正确写法：<img src="a.jpg" style="display: block; max-width: 100%; height: auto; margin: 0 auto;"> ——三者缺一不可：块级、响应式尺寸、自动外边距。
text-align: center 必须写在父容器上
这个属性不作用于 <img> 自身，只控制其父容器内所有行内级子元素的水平对齐方式。它轻量、兼容老浏览器，但限制明显：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器必须有有效宽度（如
width: 100%或固定值），否则居中不可见 - 不能解决垂直居中；若父容器高度小，图片会贴顶
- 父容器不能是
flex/grid/absolute布局，否则被忽略 - 别用废弃的
align="center"属性，Zakra、古腾堡等现代主题完全不响应
推荐写法：<div style="text-align: center;"><img src="b.jpg" style="max-width: 100%; height: auto;"></div>
响应式场景下，用 flex 实现真正可控居中
要同时保证图片随窗口缩放 + 水平+垂直居中，display: flex 是目前最稳的方案，但必须满足三个硬条件：
- 父容器设
display: flex; justify-content: center; align-items: center; - 父容器要有明确高度（如
min-height: 50vh、height: 400px，或配合aspect-ratio） -
<img>不能加position: absolute、float或display: inline-block等干扰行为
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><img src="c.jpg" style="max-width: 100%; height: auto;"></div>
Zakra 主题或古腾堡编辑器里图片不居中怎么办
不是 CSS 写得不对，而是主题层规则被覆盖或未触发：
- 检查图片是否裸写在编辑器里——Zakra 只对
<figure class="wp-block-image aligncenter">这类结构生效，单独<img>不继承 - 进 Zakra 主题定制器 →「通用」→「内容排版」→ 关闭「禁用默认图像对齐样式」
- 某些懒加载插件会移除
aligncenterclass，导致原生样式失效 - 最保险的兜底方案：加自定义 CSS 到「额外 CSS」里：
img.centered { display: block; margin: 0 auto; max-width: 100%; height: auto; }，然后在古腾堡区块设置中手动加 classaligned-center（或 HTML 模式写class="centered"）
注意：别加 !important，Zakra 原生权重已足够；加了反而可能破坏移动端 max-width 缩放逻辑。
