最稳解法是display: flex+justify-content: center+align-items: center，但需父容器有明确高度、图片设max-width: 100%和height: auto，三者缺一即失效；margin: 0 auto对默认inline的img无效，加display: block后若无明确宽度仍不生效。
直接用 display: flex + justify-content: center + align-items: center 是最稳解法，但父容器没高度、图片没 max-width: 100% 和 height: auto，三者任缺其一，图片就卡在左上角不动。
为什么 margin: 0 auto 对响应式图片基本无效
这个写法只对块级元素生效，而 <img alt="HTML图片自适应怎么居中？居中对齐设置教程" > 默认是行内元素；即使加了 display: block，max-width: 100% 会让浏览器无法确定“可用宽度”，margin: auto 就失去计算依据。
- 写了
margin: 0 auto但没加display: block→ 样式静默失效 - 父容器用了
float、position: absolute或display: flex→margin被布局模型接管 - 图片带了内联
width或height属性（如<img style="max-width:90%" alt="HTML图片自适应怎么居中？居中对齐设置教程" >）→ 覆盖 CSS 缩放逻辑 - 窄屏下图片没设
height: auto→ 高度塌陷或按默认值渲染，视觉上像“掉下来”了
display: flex 实现真正双向响应式居中的最小必要条件
这是目前最可控的方案，但漏掉任意一个条件，垂直居中就会失效——不是浏览器 bug，是 flex 布局本身的设计逻辑。
- 父容器必须同时写：
display: flex、justify-content: center、align-items: center - 父容器必须有明确高度参照：
height: 100vh或min-height: 400px；height: auto不行，align-items没交叉轴长度可依 - 图片自身只需：
max-width: 90vw（留边距） +height: auto；别加width: 100%或display: block，反而干扰基线对齐 - 旧版 iOS Safari（iOS 9–11）需补前缀：
display: -webkit-flex、-webkit-justify-content: center、-webkit-align-items: center
用 text-align: center 快速实现纯水平居中
它轻量、IE8+ 全兼容，但仅影响行内级子元素，且完全不处理垂直方向。失效往往不是代码写错，而是容器没撑开。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
text-align: center必须作用于父容器（如<div> 或 <code><p></p>），给<img alt="HTML图片自适应怎么居中？居中对齐设置教程" >自己写style="max-width:90%"→ 完全无效 - 父容器宽度为
auto且无内容或未设width/min-width→ “可居中空间”为 0 - 父容器里混了
<div> 等块级子元素 → 它们不受 <code>text-align影响，但会撑高/撑宽容器，间接破坏视觉居中 - 响应式配合要点：父容器加
width: 100%，图片加max-width: 100%和height: auto
最容易被忽略的是父容器的 display 类型和高度行为——很多“居中失败”不是代码写错，而是父容器被其他样式悄悄接管了布局上下文。比如 body 上误加 display: flex，会导致所有直系子元素变成 flex item，整个文档流就乱了。
