最可靠方案是display: flex+justify-content: center+align-items: center，但须满足父容器启用flex、有明确高度、图片未脱离文档流三个硬条件，缺一不可。
用 display: flex 实现容器内弹性居中是最可靠、最可控的方式，前提是父容器有明确高度且图片未脱离文档流。
为什么 justify-content: center + align-items: center 有时不生效
写了但图片不动，大概率是以下任一条件没满足：
- 父容器没设
display: flex（只给img加没用） - 父容器高度塌缩：比如只写了
width: 100%，没设height、min-height或aspect-ratio，导致交叉轴长度为 0 -
img被加了position: absolute、float或display: none，已脱离 flex 布局上下文 - 父容器本身是
display: grid或inline-block，覆盖了 flex 行为
max-width: 100% 和 height: auto 必须同时存在
只设 width: 100% 会拉伸变形；漏掉 height: auto 就失去响应式比例控制。这两条是图片“弹性”的基础：
-
max-width: 100%确保图片不溢出父容器宽度 -
height: auto锁定宽高比，缩放时不变形 - 若父容器宽度由视口决定（如
width: 90vw），图片会随视口连续缩放 - 避免给
img设固定height或min-height，否则破坏弹性
响应式容器高度怎么设才真正“弹性”
硬写 height: 300px 就不是响应式。更合理的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: 50vh或height: min(50vh, 400px)，兼顾视口与上限 - 用
aspect-ratio: 16 / 9替代固定高度，让容器按比例撑开（现代浏览器支持良好） - 配合
padding-top百分比实现兼容方案（如padding-top: 56.25%对应 16:9） - 如果容器是 flex 子项，确保其父级也设了
flex-direction: column或高度约束，否则高度无法向下传递
真正难的不是写那两行 flex 属性，而是让整个容器链路的高度可计算、不塌陷——尤其在嵌套 flex 或响应式断点切换时，height 的继承和计算常被忽略。
