HTML图片居中首选text-align: center（父容器），因图片默认行内元素，该方案轻量且兼容IE9+；需确保父容器有明确宽度、非float/flex/grid布局，垂直居中则必须用display: flex配合justify-content和align-items。
父容器设 text-align: center 最简方案
图片默认是行内元素，text-align: center 作用在父容器上就能让它水平居中，且天然兼容老浏览器（IE9+）。关键不是改 <img>，而是确保父容器有“可居中的上下文”：
- 父容器不能是
float、position: absolute或display: flex/grid—— 这些会覆盖text-align行为 - 父容器要有明确宽度（比如
width: 100%），否则可能塌缩成 0，居中无从谈起 - 图片本身加
max-width: 100%和height: auto，防止宽屏下溢出或窄屏下过小
示例：<div style="text-align: center; width: 100%;"><img src="a.jpg" style="max-width: 100%; height: auto;"></div>
需要垂直居中？必须用 display: flex 容器
text-align 只管水平，margin: 0 auto 对垂直方向完全无效。要真正“正中间”，父容器得满足三个硬条件：
- 设
display: flex（不能只给<img>加） - 设
justify-content: center（水平） +align-items: center（垂直） - 容器必须有明确高度，比如
height: 100vh、min-height: 300px，否则交叉轴长度为 0，“居中”无法计算
常见失效原因：父容器没高度、图片加了 float 或 position: absolute（脱离文档流）、外层用了 display: inline-block 覆盖 flex。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
margin: 0 auto 为什么有时不生效
直接给 <img> 写 margin: 0 auto 却没反应，90% 是因为漏了 display: block。行内元素对 margin: auto 的左右方向完全无视，浏览器根本不会计算。
- 正确写法：
<img src="x.jpg" style="display: block; margin: 0 auto; max-width: 100%; height: auto;"> - 如果图片嵌在
<a>里，同样要给<img>加display: block，而不是给<a> - 注意：这个方法只保证水平居中；若父容器有 padding/margin，会影响视觉居中位置
响应式对齐切换别碰图片尺寸，只改父容器行为
想小屏居中、中屏左对齐、大屏右对齐？不要每个断点都重写 img { width: 100% }，那只是重复劳动。核心是让父容器的对齐方式可被媒体查询接管：
- 用
text-align方案：媒体查询里只改父容器的text-align值（center/left/right） - 用
flex方案：媒体查询里只改justify-content（center/flex-start/flex-end） - 避免在媒体查询里反复设置图片的
max-width或height——这些应该在基础样式里一次性定义好
真正容易被忽略的是：一旦父容器用了 flex 或 grid，text-align 就彻底失效，所以切换方案时得统一底层布局模型。
