最稳做法是给设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”无参照可分 <p>正确写法：<code><img src="a.jpg" style="max-width:90%">——三者缺一不可：块级、响应式尺寸、自动外边距。text-align: center必须写在父容器上这个属性不作用于
<img>自身，只控制其父容器内所有行内级子元素的水平对齐方式。它轻量、兼容老浏览器，但限制明显：- 父容器必须有有效宽度（如
width: 100%或固定值），否则居中不可见 - 不能解决垂直居中；若父容器高度小，图片会贴顶
- 父容器不能是
flex/grid/absolute布局，否则被忽略 - 别用废弃的
align="center"属性，Zakra、古腾堡等现代主题完全不响应
推荐写法：
<div style="text-align: center;"><img src="b.jpg" style="max-width:90%"></div>
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
响应式场景下，用
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:90%"></div>Zakra 主题或古腾堡编辑器里图片不居中怎么办
不是 CSS 写得不对，而是主题层规则被覆盖或未触发：
- 检查图片是否裸写在编辑器里——Zakra 只对
<figure class="wp-block-image aligncenter"></figure>这类结构生效，单独<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缩放逻辑。 - 父容器必须有有效宽度（如
