多张图片并排且整体水平居中，关键在于用容器统一控制：flex方案需父容器设display: flex和justify-content: center，图片保持inline并加vertical-align: top，用gap替代margin；text-align方案需外层center、内层inline-block包裹每图；失效主因是父容器宽度塌陷或存在float/absolute干扰。
多张图片并排显示且整体水平居中，关键不在每张图自己“怎么居中”，而在于**用一个容器统一控制排列与对齐方式**。直接给每张 <img> 加 margin: 0 auto 或 text-align: center 会失效——因为它们彼此独立，浏览器不会把它们当一组来居中。
用 flex 布局包裹所有图片，父容器设 justify-content: center
这是最可控、兼容性好（IE10+）、语义清晰的方案。核心是让图片成为弹性子项，由父容器统一水平居中。
- 父容器必须设
display: flex和justify-content: center，否则子项不会整体居中 - 图片保持默认
display: inline即可，不用改block；但建议显式设vertical-align: top防止基线对齐导致错位 - 用
gap控制图间距，比手动加margin更干净（不触发外边距折叠） - 若需响应式换行，加
flex-wrap: wrap，再配合max-width限制单图宽度
.image-group {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.image-group img {
vertical-align: top;
max-width: 200px;
height: auto;
}
用 text-align: center + inline-block 容器（适合简单静态页）
这个方案兼容性极佳（IE8+），但只适用于图片数量固定、不需要垂直对齐或响应式换行的场景。它依赖行内流布局，不是真正的“分组居中”。
- 每张图必须包在单独的
<div>里，该<div>设display: inline-block - 最外层父容器设
text-align: center，才能让这些inline-block容器整体居中 - 图片本身不能设
display: block，否则会脱离行内流，text-align失效 - 注意：空格/换行符会被渲染为 4px 左右间隙，可用注释或
font-size: 0消除（后者需重置子元素font-size）
<div style="text-align: center;"> <div style="display: inline-block;"><img src="a.jpg"></div> <div style="display: inline-block;"><img src="b.jpg"></div> </div>
避免踩坑：为什么图片没居中？
常见失效原因不是代码写错，而是上下文冲突：
立即学习“前端免费学习笔记（深入）”；
- 父容器被设了
float、position: absolute或display: inline-block→ 宽度塌陷，justify-content: center或text-align: center失去作用对象 - 图片用了
width: 100%但父容器没设宽度 → flex/gap 计算异常，margin: 0 auto无法生效 - 误在
<img>标签上写text-align: center→ 该属性只对子元素有效，对自身无效 - 用了
flex但忘了移除子元素上残留的float或vertical-align→ 这些属性在 flex 容器中被忽略，但可能干扰旧样式逻辑
真正难的不是选哪种方法，而是确认父容器是否干净、是否有隐式宽度限制、以及图片是否还受其他全局样式影响。先清掉无关 float 和 display 覆盖，再套一层带边框的 div 看实际尺寸，比反复调 margin 更快定位问题。
