用 display: flex + justify-content: center + align-items: center 包裹图片并设 max-width: 100% 和 height: auto，可实现响应式居中；margin: 0 auto 需满足 display: block、明确宽度及非 flex/grid 父容器才生效，且在缩放时失效；flex 垂直居中需父容器有高度（如 height: 100vh 或 min-height）；图片应避免 width: 100% 或 float，父容器推荐 box-sizing: border-box。
直接用 display: flex + justify-content: center + align-items: center 包裹图片，再加 max-width: 100% 和 height: auto，就能在绝大多数现代浏览器中一步到位——不需要 JavaScript，也不用媒体查询。
为什么不用 margin: 0 auto 直接套图片？
它只管水平居中，且必须满足三个条件才生效：图片设为 display: block、有明确宽度（比如 width: 400px）、父容器不能是 flex 或 grid。一旦图片要随窗口缩放，width: 100% 或 max-width: 100% 就会让 margin: 0 auto 失效，因为“左右空余”无法计算。
常见翻车点：
- 只写
margin: 0 auto，忘了加display: block - 父容器用了
float或position: absolute，导致文档流断裂 - 在
body直接写样式，结果被其他 CSS 覆盖或继承干扰
flex 居中失效的真正原因：父容器没高度
justify-content: center 控制水平没问题，但 align-items: center 垂直居中依赖父容器有可参考的高度。如果父 div 里面只有图片、没设高，它会塌缩成 0，图片就只能贴顶显示。
解决办法很简单：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
height: 100vh（占满视口）——适合全屏 banner 类场景 - 用
min-height: 300px（最小高度）——适合内容区，避免窄屏下过矮 - 避免直接在
body上设display: flex，否则所有子元素都会变成 flex item，破坏原有结构
响应式缩放的关键：别锁死图片宽度
图片自身不设 width，只靠 max-width: 100% + height: auto 组合。这样它才能：
- 在宽屏下按原始尺寸显示（只要不超过父容器）
- 在窄屏下自动等比缩小，不溢出、不变形
- 配合父容器的
max-width: 1000px和margin: auto，实现“宽屏居中铺开、窄屏自适应收缩”
错误做法：width: 100% 强制拉伸、object-fit: cover 却没配固定容器尺寸（会导致裁剪不可控）、或给图片加 float: left（脱离文档流后所有居中都失效）。
最易被忽略的一点：图片父容器如果有 padding 或 border，而你又用了 box-sizing: content-box（默认值），那 max-width: 100% 就会超出预期宽度。建议统一加 box-sizing: border-box，省去后续排查麻烦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
