响应式图片居中需同时满足“不同屏幕下保持居中”和“不拉伸、不变形、不溢出”；text-align: center仅适用于行内级子元素水平居中，flex布局需父容器有明确高度且设display: flex，margin: 0 auto需配合display: block和max-width: 100%才可靠。
响应式图片居中不是加一个 text-align: center 就能万事大吉的事——它必须同时满足“在不同屏幕下保持居中”和“不拉伸、不变形、不溢出”两个条件，否则小屏上图片被裁剪、大屏上留白失控，都是常见翻车现场。
为什么 margin: 0 auto 在响应式场景下容易失效
这个写法本身没问题，但一配上 max-width: 100% 就常出问题：浏览器无法确定“可用宽度”是否包含 padding 或 border，尤其当父容器用了 box-sizing: border-box 以外的默认值时，margin: 0 auto 可能计算出负边距或直接忽略。
- 必须显式设
display: block，否则对行内元素无效 -
width不能是auto，但响应式里又不能写死像素值——改用max-width: 100%+height: auto是安全组合 - 父容器若用了
flex或grid，margin: 0 auto会被完全忽略 - 移动端 Safari 对
margin: auto在 flex 容器里的兼容性有历史 bug，建议回避
text-align: center 仅适用于水平居中，且依赖父容器行为
这是最轻量的写法，但它的作用范围非常窄：只影响行内级子元素的**水平对齐位置**，对垂直方向毫无控制力，且一旦父容器高度塌陷（比如没设 min-height），图片就贴顶显示。
- 必须写在父容器上，如
<div style="text-align: center"><img></div>，写在<img>上无效 - 父容器宽度必须明确，
float、display: inline-block或width: fit-content都可能导致居中失败 - 多张图片会并排居中；如需换行，得额外给
<img>加display: block - 它不解决图片本身尺寸超出容器的问题——还得配
max-width: 100%和height: auto
Flex 布局实现响应式双向居中，但父容器高度不能丢
这是目前最可控的方案，但也是最容易漏掉关键条件的地方：很多人写了 justify-content: center 和 align-items: center 却没意识到，align-items 的垂直居中效果完全依赖父容器在交叉轴（通常是高度）上有可分配空间。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于父容器，不是
<img>自身；display: flex缺一不可 - 父容器必须有明确高度参照：
min-height: 300px、height: 100vh，或通过内容撑开（但内容不确定时不可靠） -
<img>自身推荐只设max-width: 100%和height: auto，避免固定宽高破坏响应性 - 旧版 Android WebView（4.4 及以下）需加
display: -webkit-flex前缀 - 别在
<body>上直接设display: flex，否则所有直系子<div>都变成 flex item，布局全乱
媒体查询切换对齐方式，别重复定义图片尺寸
响应式对齐的核心是“按断点切换父容器的对齐逻辑”，而不是每个断点都重写一遍 img 的宽高。否则维护成本高、易冲突、还可能因 CSS 层叠顺序导致意外交互。
- 统一用包裹容器（如
.img-container）控制对齐，CSS 类名要语义化 - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } } - 如果用 flex 布局，把
text-align换成justify-content: flex-start / center / flex-end
真正难的不是写出某一种居中代码，而是判断当前结构里图片处于什么上下文：是独立展示？嵌在文字流里？还是需要随视口滚动始终居中？每种场景对应不同的约束条件，稍一混淆，display: block 和 text-align: center 就会互相打架，flex 的 align-items 也会静默失效。动手前先看一眼开发者工具里父容器的 computed height 和 display 类型，比反复试错快得多。
