响应式图片居中需确保容器有高度约束且不依赖固定宽度，max-width:100%必须配height:auto维持宽高比，flex居中时父容器不可塌陷，对齐逻辑应放在父容器而非img上，源图尺寸过大是横向滚动主因。
直接给 img 加 margin: 0 auto 或 text-align: center，在响应式场景下大概率失效——因为图片尺寸随视口变化，而居中逻辑依赖的是“固定宽度上下文”或“容器高度约束”，缺一不可。
为什么 max-width: 100% 必须配 height: auto
只写 max-width: 100% 不够，浏览器会按原始宽高比缩放，但若没设 height: auto，可能被其他样式（比如父容器 height、line-height 或未重置的 vertical-align）拉扯变形。
-
height: auto强制维持原始宽高比，避免压缩/拉伸 - 如果用了
object-fit: cover，必须同时设容器width和height，否则无法裁切——这不是响应式居中，而是画布固定场景 - 别在
img上写width: 100%+height: auto：前者会覆盖固有尺寸，导致小图被强行撑大、模糊
Flex 居中时父容器高度不能“塌”
很多人写了 display: flex; justify-content: center; align-items: center 却发现图片只水平居中、垂直贴顶——问题不在 flex，而在父容器没高度可居中。
- 用
height: 100vh是最直接的视口级居中，但会强制占满整个屏幕，不适合内容流中段落 - 更稳妥的是
min-height: 300px或height: min-content，让容器随图片自然撑开，同时保留垂直居中能力 - 如果父容器是
position: absolute或float，align-items: center会失效，得改用transform: translate(-50%, -50%)配合top: 50%; left: 50%
响应式对齐切换要靠父容器，不是图片本身
想在手机上居中、平板左对齐、桌面右对齐？别给 img 写一堆媒体查询，所有对齐逻辑应落在包裹它的容器上。
立即学习“前端免费学习笔记（深入）”；
- 用
text-align：媒体查询里控制父<div class="img-wrapper">的text-align值，兼容性最好 - 用
justify-content：配合 flex 容器，写@media (min-width: 769px) { .img-wrapper { justify-content: flex-start; } } - 切忌在媒体查询里重复设
img { width: 100% }——它已经在基础样式里了，重复只会增加维护成本 - 如果用了 Zakra 等主题，确认没启用「禁用默认图像对齐样式」，否则自定义 media query 会被清空
真正容易被忽略的是：图片上传前的原始尺寸。一张 3000px 宽的图，即使加了 max-width: 100%，在窄屏上仍会触发横向滚动条——这不是居中失败，而是容器被过宽内容撑破。压缩并限制源图最大宽度（如 ≤1200px），比任何 CSS 技巧都管用。
