响应式图片居中需父容器提供高度参照、图片设max-width:100%和height:auto、避免内联宽高；margin:0 auto因img默认行内且宽度不确定而失效；flex布局需同时设display:flex、justify-content:center、align-items:center及明确高度。
响应式图片居中不是“让图片自己动”，而是靠父容器建立可预测的布局上下文——没高度参照的 flex 容器、没清除内联宽高的 <img>、没配 height: auto 的缩放，三者任缺其一，都会在小屏或横竖屏切换时偏移、溢出或贴顶。
为什么 margin: 0 auto 在响应式场景下基本无效
这个写法只对块级元素生效，而 <img> 默认是行内元素；即使加了 display: block，max-width: 100% 会让浏览器无法确定“可用宽度”，margin: auto 就失去计算依据。
- 父容器用了
float、position: absolute或display: flex→margin被布局模型接管 - 图片带了内联
width或height属性（如<img width="600">）→ 覆盖 CSS 缩放逻辑 - 窄屏下图片未设
height: auto→ 高度塌陷或按默认值渲染，视觉上像“掉下来”了
text-align: center 只适合纯水平居中且必须作用于父容器
它轻量、IE8+ 全兼容，但仅影响行内级子元素，且完全不处理垂直方向。失效往往不是代码写错，而是容器没撑开。
- 给
<img>自己写style="text-align: center"→ 完全无效，该属性对自身无意义 - 父容器宽度为
auto且无内容或未设width/min-width→ “可居中空间”为 0 - 父容器里混了
<div>等块级子元素 → 它们不受text-align影响，但会撑高/撑宽容器，间接破坏视觉居中 - 响应式配合要点：父容器加
width: 100%，图片加max-width: 100%和height: auto
display: flex 实现真正双向响应式居中的最小必要条件
这是目前最可控的方案，但漏掉任意一个条件，垂直居中就会失效——不是浏览器 bug，是 flex 布局本身的设计逻辑。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须同时写：
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
移动端 Safari 和 Android WebView 的常见兼容陷阱
这些不是“样式没生效”，而是渲染引擎对替换元素（replaced element）的特殊处理策略导致的。
- iOS 15 以下 Safari 可能忽略
max-width: 100%对<img>的约束 → 加width: 100%强制触发重绘 - 某些安卓 WebView 若
<img>缺alt属性，会跳过缩放逻辑 → 必须保留语义化alt - 用
vw单位直接设图片宽度（如width: 90vw）→ 横竖屏切换时可能不重绘；flex + max-width更稳 - 父容器若没形成 BFC（比如没设
overflow: hidden或display: flex），浮动或绝对定位子元素可能造成高度塌陷，间接导致居中失效
真正卡住人的从来不是“怎么写”，而是“为什么写了还不行”——80% 的失效源于父容器没高度、图片带内联尺寸、或误以为居中是图片自己的事。盯住容器上下文，比反复调 <img> 样式管用得多。
