响应式图片居中需按场景选方案：水平居中用text-align:center（父容器设）；水平垂直居中首选flex布局，要求父容器display:flex、justify-content:center、align-items:center且有明确高度（如100vh），图片加max-width:100%和height:auto。
响应式图片居中不是靠“一套代码通吃”，而是根据你要解决的具体问题选对组合：水平居中？垂直+水平？是否要随窗口缩放？是否要适配老浏览器？选错一个条件，max-width: 100%再好也白搭。
text-align: center 只管水平，且必须作用在父容器上
这是最轻量、兼容性最好的方案，但只适用于图片作为行内元素（默认就是）且只需水平居中的场景。
- 错误写法：
<img style="max-width:90%">→text-align是容器属性，对自身无效 - 正确写法：给包裹
<img>的<div> 加 <code> style="max-width:90%" - 失效常见原因：父容器用了
float、display: inline-block或没设宽度，导致“可居中空间”不明确 - 多图并排时会一起居中；如需换行，得额外加
display: block或<br> - 父容器必须同时有：
display: flex、justify-content: center、align-items: center - 父容器必须有明确高度参照，比如
height: 100vh或min-height: 300px；否则align-items: center没空间可居中 -
<img>自身要加max-width: 100%和height: auto，否则宽屏下溢出、窄屏下变形 - 旧 Android（4.4 及以下）需补
display: -webkit-flex、-webkit-justify-content、-webkit-align-items - 三个硬性条件缺一不可：
display: block（或inline-block）、显式宽度（如width: 600px）、父容器不能是flex或grid容器 - 响应式写法应为：
display: block; max-width: 90vw; width: 100%; height: auto; margin: 0 auto;——max-width控上限，width: 100%保收缩 - 只控制水平方向；垂直方向仍贴顶，需配合 padding 或外层 flex 才能上下居中
- IE8+ 全兼容，但若父容器塌缩（比如没设
height或被float影响），也会失效 - 核心写法：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 父容器必须设
position: relative，否则top/left会相对于定位 -
transform是关键：它基于自身宽高计算偏移，无需预知图片尺寸，响应式下依然精准 - 慎用在常规内容流里——它会让图片脱离文档流，后续元素会上移，布局易错乱
flex 布局实现视口级居中，必须三要素齐备
现代项目首选，但漏掉任意一项都会导致图片贴顶或偏移——尤其容易忽略高度约束。
margin: 0 auto 要求块级 + 显式宽度，响应式需改用 max-width
它不是“让图片居中”，而是让浏览器把左右 margin 平分剩余空间——所以必须有“剩余空间”可分。
绝对定位 + transform(-50%, -50%) 适合弹窗类脱离流场景
它不依赖父容器尺寸，但要求父容器有 position: relative，且不适合常规文档流内的响应式图片。
真正难的不是写哪一行 CSS，而是判断当前图片所处的上下文：它是不是独占一行？父容器有没有高度？要不要支持 iOS 9 或 Android 4.4？这些细节一旦忽略，justify-content: center 就只是个摆设。
