画廊图片居中必须统一控制容器行为，不能依赖单张img加样式；因flex/grid父容器会忽略margin: 0 auto，且尺寸不一导致对齐混乱，正确做法是用place-items: center（grid）或在画廊项容器上设flex+justify-content+align-items。
画廊图片居中不能靠单张 img 自己加样式解决，必须统一控制容器行为——否则小图挤成一排、大图溢出、缩放后错位，全是常见翻车现场。
为什么 margin: 0 auto 在画廊里基本失效
画廊通常用 display: flex 或 display: grid 布局，一旦父容器设了这些，margin: 0 auto 就被完全忽略。更麻烦的是：画廊里每张图尺寸不一，max-width: 100% + margin: 0 auto 对单个 img 无法保证整行对齐一致。
- 别给每张
img单独写style="margin: 0 auto"—— 容器已接管布局，它没机会生效 - 如果画廊项是
<figure>或带 class 的<div>，居中逻辑必须落在这个容器上，不是img上 - 用
text-align: center会失效，因为flex/grid容器不响应这个属性
display: grid 画廊的居中写法（推荐）
Grid 天然适合画廊，place-items: center 能让每张图在各自格子内独立居中，且自动适配响应式断点。
- 父容器设
display: grid和place-items: center，不是给img加 - 每张图的容器（如
<figure>）需设width: 100%和height: 100%，否则place-items没作用域 -
img本身只需max-width: 100%+height: auto，禁止设固定width或height - 示例：
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; place-items: center;"> <figure style="width: 100%; height: 100%;"> <img src="a.jpg" alt="" style="max-width: 100%; height: auto;"> </figure> <figure style="width: 100%; height: 100%;"> <img src="b.jpg" alt="" style="max-width: 100%; height: auto;"> </figure> </div>
display: flex 画廊的水平居中要点
Flex 更适合单行或瀑布流画廊，但要注意：它默认只做“行内居中”，不是“每个 item 居中”。想每张图都填满并居中，得额外约束 item 尺寸。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+justify-content: center（控制整行居中），但垂直方向不管 - 每个画廊项（如
<div class="gallery-item">）必须设display: flex+justify-content: center+align-items: center，才能让里面的img居中 - 项容器要设明确宽高或
min-height，否则align-items: center无空间可居中 - 避免给
img设margin或float，它们会让 flex 规则失效
画廊响应式缩放时图片变形/溢出怎么办
居中只是表象，真正崩坏常发生在缩放环节：小图拉伸、大图裁切、宽高比丢失——根源是没封死图片的尺寸出口。
- 必须同时用
max-width: 100%和max-height: 100%，再配width: auto+height: auto，四者缺一不可 - 不要用
object-fit: cover除非你明确要裁剪；画廊常用object-fit: contain，但仅对<img>有效（注意不是 background-image） - 如果画廊项高度不固定（比如文字说明长度不一），用
min-height替代height，防止内容撑开后居中偏移 - Zakra、古腾堡等主题常注入干扰样式，检查开发者工具里画廊项是否被加了
float或display: inline-block—— 这些会直接破坏 flex/grid 居中
画廊居中的复杂点不在“怎么写”，而在“谁来管”：容器结构层级、尺寸继承链、主题注入样式，三者任意一环断裂，居中就变成玄学。最省事的方式，是把所有居中逻辑收束到画廊项容器上，img 只负责响应式缩放，别让它承担布局责任。
