直接用 display: flex + justify-content: center + align-items: center 可实现居中，但父容器需设 min-height: 100vh 提供垂直空间基准，图片须配 max-width: 90vw; width: auto; height: auto 防溢出变形；margin: 0 auto 不生效因其仅作用于块级元素且不处理垂直居中。
直接用 display: flex + justify-content: center + align-items: center 就能实现，但必须给父容器设明确高度（比如 min-height: 100vh），且图片要加 max-width 和 height: auto，否则在窄屏或大图下会溢出、拉伸或贴顶。
为什么 margin: 0 auto 单独写不居中？
它只对块级元素生效，而 <img alt="如何让HTML响应式图片适应屏幕并居中" > 默认是行内元素；即使加了 display: block，若父容器没显式宽度、或用了 flex/grid 布局，margin: auto 也会被忽略。更关键的是：它完全不管垂直方向——图片永远贴着容器顶部。
- 必须同时设
display: block和可计算宽度（比如width: 300px）；max-width: 100%不行，浏览器无法算“剩余空间” - 父容器不能是
display: flex或float，否则接管了 margin 行为 - 小屏下常见现象：
margin: 0 auto看似生效，但图片顶部被截断——本质是容器高度塌陷，没给垂直居中留空间
flex 布局里图片为啥还是贴顶？
align-items: center 只在交叉轴（通常是高度）有可用空间时才起作用。如果父容器没设高度，浏览器就认为“高度是 0”，图片自然被挤到顶部。
- 推荐用
min-height: 100vh而不是height: 100vh：前者确保至少一屏高，内容超长时仍可滚动；后者会卡死高度，导致底部内容不可见 - 别直接在
上设display: flex，否则所有直系子元素（如多个<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）都会变成 flex item，破坏文档流 - 旧 Android 4.4 及以下需补
display: -webkit-flex前缀（现代项目基本可忽略）
图片尺寸怎么设才不拉伸、不溢出？
max-width 和 width: auto 必须成对出现。只写 max-width: 100%，浏览器可能仍按原始尺寸渲染；只写 width: 100% 则强制拉宽，破坏宽高比。
立即学习“前端免费学习笔记（深入）”；
- 正确组合：
max-width: 90vw; max-height: 80vh; width: auto; height: auto; - 避免给
<img alt="如何让HTML响应式图片适应屏幕并居中" >设固定height，会导致变形；真要控高，改用<div> + <code>aspect-ratio+object-fit: cover -
object-fit: contain对普通<img alt="如何让HTML响应式图片适应屏幕并居中" >无效——它是为<video></video>或background-image设计的
真正容易被忽略的不是“怎么写居中”，而是“谁来提供高度上下文”。父容器的高度是否稳定可解析，决定了 align-items: center 是精准居中，还是形同虚设。
