图片居中需根据布局方式选择方案：text-align: center须设于父容器且避免flex/grid；margin: 0 auto需满足display: block、有明确宽度、父容器非flex/grid；flex布局需同时设justify-content和align-items并确保父容器有高度。
直接给 <img> 加 margin: 0 auto 或 text-align: center 很可能失效——图片默认是行内元素，且居中行为完全依赖父容器的布局上下文，不是图片自己能决定的。
为什么 text-align: center 有时不生效
这个属性必须写在父容器（比如 <div> 或 <code><p></p>）上，而不是 <img> 自身。它只对行内子元素起作用，但以下情况会破坏它：
- 父容器被设了
float、display: flex或display: grid，text-align就被忽略 - 图片被显式设了
display: block或float: left，脱离了行内流 - 父容器宽度未明确（如塌缩为内容宽），浏览器无法计算“居中”的基准
- 古腾堡区块里裸贴
<img>，而没套在wp-block-image这类主题预设容器中
margin: 0 auto 必须满足的三个条件
这是最常翻车的方案：缺一不可，否则图片要么左贴边、要么撑满、要么消失。
-
display: block（或inline-block）——让图片脱离行内流 - 有可计算的宽度：
width: 300px、max-width: 80vw都行；但width: 100%或没设宽度就失效 - 父容器不能是
flex或grid容器——它们会接管margin行为，导致auto被忽略
示例（安全写法）：
@@##@@
Flex 布局实现真·响应式居中（含垂直）
这是现代项目首选，但容易只写一半：justify-content: center 只管水平，align-items: center 才管垂直，两者必须同时存在，且都加在父容器上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器必须有高度参照，比如
min-height: 300px或height: 100vh；否则align-items没空间可居中，图片只会水平居中、垂直贴顶 - 别直接在
上加display: flex——它会让所有直系子元素（如多个<p></p>）变成 flex item，破坏原有结构 - 旧 Android（4.4 及以下）需加
display: -webkit-flex前缀
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">@@##@@</div>
响应式对齐切换要改父容器，不是改图片
小屏居中、中屏左对齐、大屏右对齐——关键不是每个断点都重写图片尺寸，而是用媒体查询控制父容器的对齐方式。
- 用
text-align：在媒体查询里改父容器的text-align值，比如@media (min-width: 769px) { .img-container { text-align: left; } } - 用
flex：改justify-content，比如justify-content: flex-start（左）、center（中）、flex-end（右） - 绝对不要在每个断点里重复写
img { width: 100% }——这和对齐无关，还可能干扰原生响应逻辑
最容易被忽略的是：图片本身必须保留 max-width: 100% 和 height: auto，否则在窄屏下仍会溢出或变形。
