display: flex + justify-content: center + align-items: center 是最可控的居中方案，但需父容器有高度来源（如min-height: 100vh）且图片设max-width: 100%、height: auto；margin: 0 auto仅水平居中、依赖块级+定宽，对inline元素（如img）无效，且完全不处理垂直居中，在flex/grid父容器中失效。
直接用 display: flex + justify-content: center + align-items: center 是目前最可控的自动居中方案，但必须配对约束父容器高度和图片缩放行为，否则在小屏或大图下会溢出、拉伸或视觉偏移。
为什么 margin: 0 auto 在响应式场景下经常失效
它只管水平居中，且依赖父容器有明确宽度；一旦图片宽高比失衡、父容器未设 max-width 或用了 width: 100%，图片就会撑破布局。更麻烦的是：它完全不处理垂直居中——在移动端视口高度变化频繁时，margin: 0 auto 根本无法保证图片始终在屏幕中央。
-
img默认是inline元素，margin: 0 auto对其无效，必须加display: block - 即使加了
display: block，若只设max-width: 100%，浏览器无法推导“剩余空间”，margin: 0 auto仍不生效 - 父容器若为
display: flex或display: grid，会接管子元素 margin 行为，该写法直接被忽略 - 垂直方向无任何控制能力，小屏下常出现顶部被截断或底部大片留白
display: flex 居中必须满足的三个硬性条件
写了 justify-content: center 和 align-items: center 却没反应？大概率卡在这三处：
- 父容器没设
display: flex——只给img加没用 - 父容器高度塌陷：比如只写了
width: 100%，没设height、min-height或aspect-ratio，导致交叉轴长度为 0，“垂直居中”无从谈起 -
img加了position: absolute或float——元素已脱离文档流，flex 规则自动失效 - 图片自身没加
max-width: 100%和height: auto，宽高比崩坏后，居中只是“位置对了，形状错了”
min-height: 100vh 比 height: 100vh 更安全
用 height: 100vh 会让容器严格等于视口高度，一旦内容超出（比如长图+文字），就会触发滚动条，而图片可能被卡在顶部或底部；min-height: 100vh 则确保至少占满一屏，同时允许自然撑高。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不要直接在
body上设min-height: 100vh——会破坏段落流，应封装专用容器如<div class="hero-img"> -
max-width和width: auto必须成对出现：只设max-width: 90vw不够，浏览器仍可能按原始尺寸渲染；必须加width: auto; height: auto;，让浏览器根据约束自动计算比例尺寸 - 错误示范：
#my-img { width: 100%; height: auto; }→ 在窄屏下强制拉宽，破坏宽高比 - 正确写法：
#my-img { max-width: 90vw; max-height: 80vh; width: auto; height: auto; }
图片本身别乱加 object-fit
object-fit: contain 是多余操作——它适用于 background-image 或 <video>、<canvas> 等替换元素，对普通 <img> 完全无效。真正起作用的是 max-width + height: auto 的组合，配合父容器的 flex 布局行为。
最容易被忽略的一点：flex 容器的 align-items 只对“单行”子元素生效；如果容器里除了图片还有文字、按钮等其他元素，它们会一起被垂直居中——这时候得判断，是真需要整个容器居中，还是仅图片需居中、其余内容按文档流排列。
