响应式图片居中需用flex或grid布局容器并设max-width:100%和height:auto，避免text-align或width/height:100%等错误写法，且须确保父容器有明确高度。
响应式图片居中不是“让图片自己动”，而是让容器能随视口变化提供稳定居中上下文，同时图片不溢出、不变形。
父容器必须用 flex 或 grid，不能只靠 text-align: center
很多人试了 text-align: center 发现小屏居中、大屏偏右，是因为它只管水平，且依赖父容器宽度——而响应式下父容器宽度常由内容撑开或受媒体查询影响，不可靠。真正可控的方案是：
-
display: flex+justify-content: center+align-items: center（需父容器有明确高度，如height: 100vh或min-height: 400px） -
display: grid+place-items: center（更简洁，但旧 Android 4.4 及以下需加-webkit-前缀） - 别在
body直接设display: flex——它会让所有直系子元素变成 flex item，破坏原有段落流
img 标签必须加 max-width: 100% 和 height: auto
否则图片在窄屏下会横向溢出，或在宽屏下被拉伸变形。这两个声明缺一不可：
-
max-width: 100%：限制图片最大宽度不超过父容器（不是视口） -
height: auto：保持原始宽高比，避免压缩失真 - 不要写
width: 100%——它强制铺满，会破坏比例；也不要写height: 100%——没设定父容器高度时，结果不可控
媒体查询切换对齐方式时，只改父容器，不重复定义图片尺寸
比如想小屏居中、大屏右对齐，错误做法是每个断点都写一遍 img { max-width: ... }；正确做法是只覆盖父容器的布局控制属性：
@media (max-width: 768px) {
.img-container { display: flex; justify-content: center; }
}
@media (min-width: 769px) {
.img-container { justify-content: flex-end; }
}
- 如果用了
text-align方案，就对应改text-align: center→text-align: right - 切记：
img的max-width和height声明只需写一次，在全局样式里，无需放进媒体查询 - 若父容器本身被设为
float或inline-block，媒体查询里的justify-content可能完全不生效——先清掉这些干扰样式
带链接的图片（a 包裹 img）要额外注意 display 行为
当 img 被 <a></a> 包裹时，<a></a> 默认是行内元素，直接对它设 text-align: center 没用；而对 <a></a> 设 display: block 再配 margin: 0 auto 又无法垂直居中。最稳解法是：
- 把
<a></a>当作 flex 容器：<a style="display: flex; justify-content: center; align-items: center;"><img ...></a> - 或者在外层再包一层
<div class="img-container">，让该 <code>div承担 flex/grid 布局职责 - 别给
<a></a>设display: inline-block后又加text-align——这种嵌套容易因行高、基线等细节导致视觉偏移
最容易被忽略的是：flex 容器的 align-items: center 在父容器高度塌陷时完全无效，而响应式页面里容器高度常来自内容而非固定值——所以宁可写 min-height: 30vh，也别指望它自动“感知”图片高度去居中。
