最可靠方案是display: flex+justify-content: center+align-items: center，但必须同时满足父容器有可计算高度、图片不脱离文档流、尺寸约束正确三个条件，缺一则图片贴顶、靠左或溢出。

直接用 display: flex + justify-content: center + align-items: center 是目前最可靠、最可控的响应式图片居中方案，但必须同时满足父容器有可计算高度、图片不脱离文档流、尺寸约束写对三个条件——漏掉任意一个，图片就会贴顶、靠左或溢出。

为什么 margin: 0 auto 单独用大概率失效

这个组合只在极少数静态场景下有效，响应式环境里几乎必翻车：

• img 默认是 inline 元素，margin: 0 auto 对它完全无效
• 即使加了 display: block，也只控制水平方向；垂直方向始终贴顶，无法响应容器高度变化
• max-width: 100% 不提供确定宽度，浏览器无法计算“剩余空间”，margin: auto 退化为无操作
• 父容器若用了 display: flex 或 display: grid，会直接接管子项 margin 行为，样式被忽略

display: flex 居中必须配齐的三要素

只写 display: flex 和 justify-content: center 是半套方案，垂直方向一定失败：

• 父容器必须设明确高度参照：比如 min-height: 100vh（比 height: 100vh 更安全）、height: 400px，或确保所有祖先元素都有 height
• justify-content: center（主轴居中）和 align-items: center（交叉轴居中）必须同时存在，缺一不可
• img 自身只需 max-width: 90vw（留白防过满）+ height: auto（保宽高比），不要写 width 或 height 固定值

text-align: center 什么时候能用、怎么用才稳

这是兼容性最好、代码最轻量的水平居中方式，但仅限水平，且极易被干扰：

DeepBI DHTML 页面生成器

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

下载

• 必须作用于父容器（如
  ），不是 自身； 保持默认 inline 状态即可
• 父容器需有明确宽度：比如 width: 100% 或 max-width: 1200px；若用了 float 或 position: absolute，text-align 会失效
• 配合 max-width: 100% + height: auto 才算完整响应式，否则小屏可能拉伸或塌陷
• 别混用块级子元素（如
  、
  ）在同一父容器里——它们不受 text-align 影响，视觉上就“偏了”

  真正容易被忽略的是父容器的高度上下文：很多 flex 居中失效，不是 CSS 写错了，而是 html 和 body 没设 height: 100%，导致 min-height: 100vh 失去参照；或者图片加载前 DOM 已渲染，旧版 Safari 就直接放弃对齐计算。这些细节不排查，再标准的写法也白搭。