max-width: 100% 仅限制图片宽度不超父容器，不参与居中；居中需配合 display: block + width + margin: 0 auto，或 flex 布局（justify-content/align-items），且父容器需有明确尺寸和定位上下文。
max-width: 100% 本身不能居中，只控制缩放上限
max-width: 100% 的作用是“让图片宽度不超过父容器”，它不参与定位，也不改变元素的布局行为。很多人加了这行就以为图片会自动居中，结果发现它还是靠左贴边——因为浏览器默认把 <img> 当作行内元素处理，而行内元素在块级父容器里天然左对齐。
真正起居中作用的是其他样式，max-width: 100% 只是配合它们防止溢出。如果父容器没设宽度、或用了 float / position: absolute，max-width 的参照系还会漂移，导致缩放后反而偏移。
- 必须搭配
height: auto，否则宽高比断裂，图片被拉伸或压扁 - 单独写
max-width: 100%+margin: 0 auto通常无效：因为<img>默认是行内元素，margin: auto对它不起作用 - 若父容器是
flex或grid，margin会被完全忽略，此时居中必须靠容器的justify-content或text-align
用 margin: 0 auto 实现水平居中的硬性条件
这个组合确实能居中，但有三个不可妥协的前提，缺一就会静默失效：
-
<img>必须显式设为块级：display: block - 图片必须有可计算的宽度：比如原始尺寸（如 800×600）、或显式
width: 300px；max-width: 100%不行，浏览器无法推导“剩余空间” - 父容器不能是
flex/grid布局，否则margin行为被接管
典型安全写法：<img src="a.jpg" style="max-width:90%">。注意这里用的是 width，不是 max-width；若想响应式，得额外加媒体查询或换用 flex。
flex 布局才是响应式双向居中的可靠解法
现代项目中，display: flex 是解决“随视口缩放+始终居中”的最简路径，但容易只写一半：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须作用于父容器（
<div>），不是 <code><img>自身 - 三者缺一不可：
display: flex、justify-content: center（水平）、align-items: center（垂直） - 父容器必须有明确高度参照，比如
min-height: 100vh或height: 500px；仅写height: 100%往往无效，因为上级容器可能无显式高度 - 图片自身仍需
max-width: 90vw（非100vw）+height: auto，避免紧贴屏幕边缘且保持比例 - 如果父容器用了
position: relative且自身宽度靠width: 90%计算，那么90vw的图片在缩放时会相对于一个波动的基准定位，产生微小偏移 -
vw单位直接参照视口，和父容器是否塌陷无关，所以它比%更稳定；但若同时存在多个嵌套max-width层级，优先级容易冲突 - 别在每个
@media里重复定义图片的max-width，基础层统一设好（如max-width: 90vw），断点只调容器对齐方式（text-align或justify-content）
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><img src="b.jpg" style="max-width:90%"></div>
max-width 配合视口单位时的常见翻车点
用 max-width: 90vw 看似聪明，但实际容易因参照系混乱导致缩放跳动或偏移：
真正难的不是写对一行 max-width，而是确保它所依赖的整个布局上下文——父容器的尺寸、定位、显示模式——全都处于可控状态。稍有松动，居中就会失效，而且错误不报错，只悄悄偏移。
