margin: 0 auto 对 失效，因其默认为行内元素，必须显式设 display: block 且有明确宽度；text-align: center 需作用于父容器，仅对行内内容有效；flex 居中需父容器 display: flex 并设 justify-content: center 和 align-items: center，且高度不可塌陷。
直接给 <img> 加 margin: 0 auto 或 text-align: center 大概率失效——根本原因不是写法错，而是没处理好图片的显示模式、父容器约束和响应式上下文。
为什么 margin: 0 auto 不生效
这个写法只对块级元素有效，而 <img> 默认是 inline。即使加了 margin: 0 auto，浏览器也无视它。
- 必须显式设
display: block（或inline-block），否则margin: auto完全不触发 - 图片还得有可计算宽度：用
width: 300px可行，但width: 100%或max-width: 100%会让auto失去参照，左右 margin 变成 0 - 父容器不能是
display: flex或display: grid，否则会接管居中逻辑，margin被忽略 - 别同时设
float或position: absolute，它们会让元素脱离文档流，margin: auto彻底失效
text-align: center 只能作用于父容器
很多人把 text-align: center 写在 <img> 标签上，这完全无效。它必须加在包裹图片的父元素（比如 <div> 或 <code><p></p>）上。
- 适用前提是图片保持
inline（默认状态），且父容器没被float、flex、grid或position: absolute干扰 - 如果父容器用了
font-size: 0（常见于清除 inline 间隙），图片可能高度塌缩或消失 - 它只管水平方向；垂直方向仍需靠
line-height、padding或外层 flex 容器配合 - 混排时注意：父容器里如果有
<div> 这类块级子元素，它们不受 <code>text-align影响，依然左对齐Flex 布局实现真正响应式居中
这是现代项目最可靠的方式，但必须同时满足三个条件：父容器设
display: flex+justify-content: center+align-items: center，且容器本身有明确高度。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 高度不能塌：用
height: 100vh（视口全高）或min-height: 300px等显式值，否则align-items: center没空间可居中 - 别直接在
上加display: flex，否则所有直系子元素（如多个<p></p>）都会变成 flex item，布局全乱 - 图片自身只需
max-width: 100%+height: auto，确保缩放不变形；不用设width或height - 旧 Android（4.4 及以下）需加
display: -webkit-flex前缀
响应式图片居中失败的隐藏陷阱
很多“居中不了”其实是其他样式在暗中干扰，尤其在主题（如 Zakra）或 CMS（如 WordPress 古腾堡）里更常见。
- 父容器写了
width: 1000px这类固定宽度：小屏下无法收缩，图片被迫溢出，看起来像“居中失败”，其实是“居中了一个过宽的图”——应改用max-width: 1000px+width: 100% - Zakra 主题中，裸
<img>不继承居中样式，必须套在<div class="wp-block-image"> 或手动加 <code>class="centered" - 插件（如懒加载、加速类）可能重写
<img>的 class，导致主题的.wp-block-image.aligncenter规则不匹配 - 上传原图过宽（如 2000px）：即使写了
max-width: 100%，小屏设备仍会横向滚动——压缩图片并限制上传尺寸（≤1200px）才是治本
真正难的不是选哪种方法，而是判断当前 DOM 结构和已有 CSS 到底卡在哪一层：是图片 display 模式？父容器宽度/高度是否塌陷？还是第三方样式覆盖了你的规则？调试时优先看 computed styles 里的
display、box-sizing和父容器实际渲染尺寸。 - 高度不能塌：用
