直接用 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 单独写不居中？

它只对块级元素生效，而 默认是行内元素；即使加了 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，否则所有直系子元素（如多个
  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  ）都会变成 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;
• 避免给 设固定 height，会导致变形；真要控高，改用
  + aspect-ratio + object-fit: cover
• object-fit: contain 对普通 无效——它是为 或 background-image 设计的

真正容易被忽略的不是“怎么写居中”，而是“谁来提供高度上下文”。父容器的高度是否稳定可解析，决定了 align-items: center 是精准居中，还是形同虚设。