直接用 text-align: center 在父容器上配合 img 的 max-width: 100% 和 height: auto 可实现响应式水平居中；垂直居中必须用 flex 布局，且父容器需有可计算高度。
直接用 text-align: center 在父容器上，配合 img 的 max-width: 100% 和 height: auto，就能稳定实现响应式水平居中；需要垂直居中时，必须用 flex 布局，并确保父容器有可计算的高度。
为什么 margin: 0 auto 单独写在 img 上没反应
因为 img 默认是 display: inline，而 margin: auto 对行内元素完全无效。即使加了，浏览器也静默忽略。
- 必须显式加
display: block才能激活margin行为 - 还得有“可计算的宽度”：比如固定值
width: 400px；max-width: 100%不行，浏览器算不出剩余空间 - 若父容器是
display: flex或display: grid，会接管margin，导致失效 - 它只管水平，垂直方向毫无作用——窄屏下图片可能贴顶或留大片空白
用 flex 实现双向居中，三个条件缺一不可
justify-content: center 和 align-items: center 看似简单，但漏掉任意一个，图片就只是“看起来居中”。
- 父容器必须设
display: flex（不能只写在img上） - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 父容器得有明确高度参照：
height: 100vh或min-height: 50vh；height: 100%多数情况下无效，因为上级容器往往没设高 -
img自身要加max-width: 100%和height: auto，否则宽屏溢出、窄屏拉伸
媒体查询切换对齐方式，别碰图片尺寸
响应式对齐的本质是“按断点改容器行为”，不是反复重写 img 样式。重复定义 width 或 max-width 容易冲突、难维护。
立即学习“前端免费学习笔记（深入）”；
- 基础层统一写：
img { max-width: 90vw; height: auto; } - 对齐逻辑全交给父容器：
text-align（兼容旧环境）或justify-content（flex） - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }（前提是父容器已是flex）
父容器高度塌陷是最容易被忽略的硬伤
很多人写了 display: flex; align-items: center，但图片还是贴顶——根本原因不是 CSS 写错，而是父容器高度为 0。浏览器没法在“没有高度的空间”里做垂直居中。
- 不要在
body直接设display: flex，会把所有直系子元素（如多个p）都变成 flex item，破坏文档流 - 推荐封装专用容器：
<div class="hero-img"></div>，并在其上设min-height: 100vh - 若容器内容动态加载（如 JS 插入），需确认高度是否随内容撑开；否则
align-items: center形同虚设
