图片自适应居中首选flex布局：父容器设display: flex、justify-content: center、align-items: center及明确高度，图片设max-width: 100%和height: auto即可；margin: 0 auto需图片有固定宽度且父容器正常撑开；text-align: center仅对inline图片有效。
图片自适应居中，核心是「既要随容器缩放，又不能溢出，还要稳稳居中」——max-width: 100% 和 height: auto 是缩放前提，但光靠它们不解决居中；真正起作用的是父容器的布局方式，不是图片自身加什么 magic 属性。
为什么 margin: 0 auto 在响应式场景下经常失效
它要求图片有明确宽度才能算出左右空隙，而 max-width: 100% 或 width: 100% 会让浏览器失去“固定参照”，导致 margin: 0 auto 退化为贴左。更隐蔽的问题是：父容器如果没撑开宽度（比如空 div、或只含 inline 内容），它的计算宽度就是 0，居中自然无从谈起。
- 必须同时设
display: block和width（哪怕只是width: auto）才可能生效，IE8 及更老浏览器尤其敏感 - 父容器用了
float、position: absolute或display: flex，会直接接管 margin 行为，margin: 0 auto被忽略 - 移动端图片宽过屏幕时，
max-width: 100%能防溢出，但若没配合height: auto，可能被拉伸变形
flex 布局实现自适应居中（推荐首选）
不用管图片是 inline 还是 block，也不用硬写 width，只要父容器有可感知的高度/宽度，就能稳居中。关键是别漏掉任一条件：
- 父容器必须设
display: flex，不是 -
justify-content: center控水平，align-items: center控垂直，两个都得写 - 父容器要有高度参照：比如
min-height: 300px、height: 100vh，或靠内容流撑开（如含其他块级元素） - 图片保持
max-width: 100%+height: auto，它会自动缩放并居中，无需额外干预
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 400px;"> @@##@@ </div>
text-align: center 仅适用于纯行内流场景
它不操作图片，而是让父容器把图片当文字排版。一旦你给图片加了 display: block、float 或 position，它立刻失效。常见误用：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
style="text-align: center"→ 完全无效，text-align是父容器属性 - 父容器用了
font-size: 0（常用来清除 inline 间隙）→ 图片可能消失或错位 - 父容器里混了 等块级子元素 → 它们不受
text-align影响，依然左对齐适用场景很窄：图文混排段落、卡片里单张配图、banner 文字+小图组合。示例：
<div style="text-align: center; font-size: 16px;"> <p>欢迎访问</p> @@##@@ </div>
容易被忽略的兼容性与调试点
现代项目用
flex没问题，但如果你要支持 Android 4.4 及以下系统，display: flex必须加-webkit-前缀；另外，Chrome PDF 导出（比如用html-ppt-to-pdf）对flex的align-items: center支持不稳定，此时改用grid的place-items: center更可靠。最常卡住的地方其实是父容器尺寸——打开开发者工具，先看父 div 的 computed width/height 是不是预期值，再查 display 类型和是否被其他样式覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
