图片在固定宽度容器内居中需满足两点：一是让图片脱离行内流，二是确保父容器有明确宽度。常用方法包括text-align: center（最简单）、margin: 0 auto + display: block（更可控）、Flex布局（推荐双向居中），并需注意避免内联width、float、未设宽等常见失效原因。
图片在固定宽度容器内居中，关键在于两点：一是让图片脱离行内流（否则 margin: auto 无效），二是确保父容器有明确宽度且不被内容撑破。下面分场景说明实用做法。
用 text-align: center 实现水平居中（最简单）
适用于单张或并排多张图片，且只需水平居中：
- 给容器（如
<div>）设置 <code>text-align: center，<img>默认是行内元素，会自动居中 - 容器必须有明确宽度（比如
width: 400px或width: 100%），否则居中无参照 - 避免给容器加
float、display: inline-block或display: flex，否则text-align可能失效 - 注意：此法不能垂直居中；若图片高度超过容器，需额外处理（如设
line-height或换方案） - 给
<img>加display: block和margin: 0 auto - 图片自身最好有明确宽度（如
width: 200px）或使用max-width: 100%防撑出容器 - 容器仍需有固定宽度，否则
auto外边距无法计算 - 此法比
text-align更“干净”，不受父级文字对齐逻辑干扰，兼容性好（IE8+） - 给容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 容器必须有明确高度（如
height: 300px），否则align-items: center无效果 -
<img>不用改display，也不用设宽高，flex 自动处理 - 兼容性良好（现代浏览器及 IE10+），代码仅三行，不易出错
-
<img>有内联width属性（如width="600"）？它会强制撑开容器，导致margin: auto或text-align失效——应改用 CSS 的max-width: 100% - 容器用了
float或position: absolute？这些会让它脱离文档流，margin: auto将不工作 - 父容器本身没设宽，或被
display: fit-content等限制？text-align和margin: auto都需要可计算的空间 - 图片被包在
<p></p>或<span></span>里？检查这些包裹元素是否意外设置了display: inline以外的值
用 margin: 0 auto + display: block 实现水平居中（更可控）
适合需要独立控制图片样式、或避免受父容器文本对齐影响的场景：
用 Flex 布局实现水平+垂直居中（推荐用于双向居中）
当容器有固定宽高，且要求图片完全居中（上下左右都居中）时，flex 是最简洁可靠的方案：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
注意事项：避免常见失效原因
很多“居中失败”其实不是方法问题，而是细节被忽略：
