最稳通用做法是给<img>加display: block和margin: 0 auto；若混排文本流，优先用父容器text-align: center；需双向居中则用display: flex; justify-content: center; align-items: center。
直接给 <img> 加 margin: 0 auto 或 text-align: center 很大概率失效——因为图片默认是行内元素，且父容器常缺宽度约束或 display 上下文。
为什么 margin: 0 auto 对图片不起作用
这不是 bug，而是 CSS 盒模型的必然行为：
-
<img>默认是display: inline，margin: 0 auto对行内元素无效 - 即使设了
margin: 0 auto，若父容器没明确宽度（比如width: 100%）或被float/position: absolute干扰，也会“算不出剩余空间” - 图片加了
max-width: 100%后，其计算宽度变成“依赖父容器”，此时若父容器本身宽度过大（如width: 1000px），窄屏下仍会溢出、无法居中
text-align: center 必须作用在父容器上
很多人写成 <img style="text-align: center">，这完全无效——text-align 是容器属性，不是图片自己的。
- 正确写法：
<div style="text-align: center"><img src="..."></div> - 适用场景：纯水平居中、兼容老浏览器、图文混排段落
- 风险点：如果父容器里混了
<div>这类块级子元素，它们不受text-align影响，布局可能错乱 - 响应式补充：配合
max-width: 100%和height: auto，否则图片在小屏下仍可能撑破容器
Flex 布局实现真正响应式二维居中
这是现代项目最可靠的方式，但必须写全、配对、设高：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须同时有：
display: flex、justify-content: center（水平）、align-items: center（垂直） - 父容器要有可计算的高度，比如
height: 100vh或min-height: 300px；否则align-items没空间可居中，图片只会贴顶 - 图片自身只需：
max-width: 100%+height: auto，不建议设固定width或height - 避免踩坑：别直接在
<body>上加display: flex，它会让所有直系子元素（如多个<p>）变成 flex item，破坏原有结构
图片带链接时怎么居中
包裹 <a> 后，问题更隐蔽：链接默认也是行内元素，text-align: center 只能居中链接框，但图片若没设 display: block，仍可能底部留白或对齐偏移。
- 推荐做法：给
<img>单独设display: block+margin: 0 auto，而不是给<a>设样式 - 如果想让整个链接区域可点击且居中，用 flex 更稳妥：
<a style="display: block; text-align: center"><img></a>不够，应套一层 div 容器并设 flex - 注意
loading="lazy"和alt不影响居中，但缺失会影响可访问性和 SEO
真正难的不是选哪种方法，而是判断当前 HTML 结构里哪一层容器“实际承担了宽度和上下文责任”。很多居中失败，根源是某一级父容器悄悄用了 width: 1000px 或 overflow: hidden，把响应式链路掐断了。
