父容器必须有可计算宽度且未塌陷，否则text-align: center或margin: 0 auto全部失效；需用outline验证，修复方式包括设width: 100%、min-width: min-content或触发bfc。
检查父容器是否“有宽度”且未塌陷
很多居中失败的根源不是图片样式写错，而是父容器 width 不可计算：空 <div>、仅含浮动子元素、或被 <code>position: absolute 拉离文档流，都会导致它宽度塌为 0。此时 text-align: center 或 margin: 0 auto 全部失去作用对象。
快速验证方法：给父容器临时加 outline: 1px solid red，看是否包裹住图片；若 outline 是一条细线或完全不可见，说明它已塌陷。
- 修复方式：显式设
width: 100%、max-width: 1200px，或用min-width: min-content - 避免在父容器上同时用
float和text-align: center——float会让容器脱离文档流，text-align失效 - Zakra / 古腾堡等 CMS 主题中，裸
<img>常不被识别，需包裹在<figure class="wp-block-image aligncenter"></figure>内
确认 img 的 display 和 width 是否满足 margin: 0 auto 前提
margin: 0 auto 对 <img> 生效，必须同时满足三个硬条件：块级显示、可计算宽度、父容器未接管布局。漏掉任意一个，图片就稳稳靠左。
- 必须加
display: block（默认是inline，margin: auto完全被忽略） -
max-width: 100%≠ 可计算宽度——浏览器无法据此分配“剩余空间”，margin: 0 auto静默失效；改用width: 300px或配合固有尺寸才有效 - 父容器若用了
display: flex或display: grid，margin行为被覆盖，此时应改用justify-content: center - 别给
<img>加float或position: absolute——元素一脱离文档流，margin: auto就彻底作废
验证 text-align: center 是否写在了正确位置
text-align: center 是父容器属性，不是图片属性。写在 <img> 标签上毫无意义，99% 的“无效”都源于这个错位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须写在包裹图片的父元素上，例如：
<div style="text-align: center;"><img ...></div> - 父容器若设了
font-size: 0（常用于清除 inline 元素间隙），会导致图片高度塌缩甚至消失；补一句<img style="max-width:90%">即可 - 该方式只管水平对齐；若父容器高度小，图片会贴顶——垂直方向需额外处理（如
line-height、padding或外层 flex） - 混排时注意：父容器里若有
<p></p>、<div> 等块级子元素，它们不受 <code>text-align影响，可能把图片视觉上“挤偏”Flex 居中为什么
align-items: center没反应写了
justify-content: center和align-items: center却只水平居中、垂直不动？大概率是父容器在交叉轴（通常是高度）上没有可用空间。- 必须设
height、min-height或aspect-ratio——比如min-height: 50vh或height: 400px；否则浏览器认为“垂直方向只有 0px 高”，居中无从谈起 - 别直接在
上加display: flex，否则所有直系子元素（如多个<p></p>）都会变成 flex item，原有文档流全乱 -
<img>自身不能加position: absolute或float，否则脱离文档流，flex 规则自动跳过它 - 旧 Android（4.4 及以下）需补前缀：
display: -webkit-flex和对应-webkit-justify-content/-webkit-align-items
display、position或父容器高度值没被看见。打开浏览器开发者工具，逐层点开父容器的 Computed 面板，盯住display、width、height和box-sizing这几项，比反复改margin更快定位问题。 - 必须设
