用 display: flex 实现图片水平居中且自动换行，需设 justify-content: center 和 flex-wrap: wrap，并配 max-width: 100%、height: auto、srcset/sizes 实现真正响应式；IE11 降级用 text-align + inline-block。
用 display: flex 实现图片水平居中且自动换行
直接给容器加 display: flex 是最稳妥的方案，比 text-align: center 更可控，也比 float 或绝对定位更适配响应式。关键点在于设置 justify-content: center 居中子项，再用 flex-wrap: wrap 允许换行。
常见错误是只设了 justify-content 却忘了 flex-wrap，结果小屏下图片被强行压缩或溢出；或者没给图片设 max-width: 100%，导致在窄屏上撑破容器。
- 容器必须有明确宽度（比如
width: 100%或不设，但不能是inline类型） - 每张
<img>建议加height: auto防止比例失真 - 图片之间留白用
gap（现代浏览器支持），老版本可用margin替代
图片本身要真正响应式：别漏掉 srcset 和 sizes
仅靠 CSS 居中不等于响应式图片——如果 <img> 的 src 指向一张 2000px 宽的图，在手机上仍会下载大图，浪费带宽。必须配合 srcset 提供多尺寸源，再用 sizes 告诉浏览器“在不同视口下这张图大概占多宽”。
典型坑是写了 srcset 却没写 sizes，此时浏览器默认按 100vw 计算，可能选错资源；或者 sizes 值和实际布局宽度不匹配（比如 flex 容器里图片只占 50% 宽，但 sizes 写成 (max-width: 768px) 100vw）。
立即学习“前端免费学习笔记（深入）”；
示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<img src="photo-400.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 960px) 50vw,
33vw"
alt="风景">
IE11 兼容时用 text-align + inline-block 替代 Flex
如果项目仍需支持 IE11，flex-wrap 行为不一致（尤其在 min-height 或百分比高度容器里），建议降级方案：父容器设 text-align: center，图片设 display: inline-block 并清除换行符空白（或用注释、字体大小 hack）。
这个方案的问题是：图片垂直对齐默认是基线（vertical-align: baseline），容易产生底部空隙；且无法像 flex 那样精确控制换行后的对齐方式（比如希望最后一行也居中）。
- 务必加
vertical-align: top或middle消除基线间隙 - 图片外层避免用
<p>包裹（<p>默认有上下 margin） - 若需最后一行居中，得用 JS 计算剩余元素数补空格，不推荐
避免用 margin: 0 auto 单独居中每张图
有人会给每张 <img> 加 display: block; margin: 0 auto，看似简单，但实际会导致每张图独占一行——因为 block 元素默认不并排。除非你本意就是竖排，否则这和“多张图片居中排列”的需求完全相悖。
另一个变体是给每张图加 float: left 再配合 margin: 0 auto，这更危险：浮动元素脱离文档流，父容器可能高度塌陷，且 margin: 0 auto 在浮动元素上根本不起作用。
记住：margin: 0 auto 只对设置了明确 width 的块级元素生效，且前提是它没被浮动或绝对定位。
最常被忽略的是图片加载完成前的布局抖动——如果没设 aspect-ratio 或宽高属性，图片加载瞬间会引发重排。建议给 <img> 加 width 和 height（即使只是占位用的原始尺寸），或用 aspect-ratio: 4/3 配合 width: 100% 锁定宽高比。
