最可靠方案是父容器设text-align: center；因img默认inline，margin: 0 auto需同时满足display: block、父容器有明确宽度且未被Flex/Grid覆盖，三者常遗漏。
直接给父容器加 text-align: center，比给 <img alt="HTML响应式图片如何解决内联元素居中问题" > 自己设 margin: 0 auto 更可靠。
为什么 margin: 0 auto 对图片经常失效
因为 <img alt="HTML响应式图片如何解决内联元素居中问题" > 默认是内联元素，而 margin: auto 在块级上下文中才生效。只写 margin: 0 auto 不起作用，除非同时满足：
- 显式设 display: block
- 父容器有明确宽度（比如 max-width: 100%）
- 没被 Flex 或 Grid 容器的对齐方式覆盖（例如 justify-content: flex-start）
实际开发中，这三个条件常漏掉一两个，尤其在 Remix、Next 等框架的组件里，父容器可能已启用 display: flex，此时 margin 直接被忽略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
text-align: center 的适用边界
这个方案轻量、兼容性好（IE8+），但只适用于单图或简单图文组合，且父容器不能是 Flex/Grid 容器（否则会冲突）。使用时注意：
- 必须作用于 <img alt="HTML响应式图片如何解决内联元素居中问题" > 的**直接父元素**，嵌套 <div> 或 <code><p></p> 会中断继承
- 如果父容器还包含文字或其他内联内容，它们也会一起居中，属于预期行为
- 配合 max-width: 100% 和 height: auto 才能保证响应式缩放不溢出
Flexbox 居中：需要精确控制时的首选
当父容器已是 Flex 布局，或需要同时水平+垂直居中（比如图片叠加文字），就别硬套 text-align。直接用：
- 父容器加 display: flex、justify-content: center（水平）
- 加 align-items: center（垂直，需父容器有高度或 min-height）
- <img alt="HTML响应式图片如何解决内联元素居中问题" > 无需额外样式，display: block 或 inline 都不影响
容易踩的坑：
- 忘记给父容器设 min-height，导致垂直居中“看不见”（内容撑不开容器）
- 在表格单元格（<td>）里滥用 Flex——老版本 Safari 对 <code>table-cell + flex 支持不稳定
- 图片本身设了 width 和 height 属性，却没配 max-width: 100%，小屏下仍会横向溢出
真正难的不是让图片居中，而是判断该用哪一层上下文去控制它：是文本流、块级流，还是弹性流。选错起点，后面所有 margin、transform、vertical-align 都只是在补洞。
