响应式图片居中核心在于控制父容器而非图片自身，text-align: center（水平）、flex/grid（二维）、margin: 0 auto（块级固定宽）各适用不同场景，失效多因容器宽度不明确、高度缺失或样式干扰。
响应式图片居中，核心不是“调图片”，而是“控容器”——图片自身只负责缩放，居中逻辑必须由父容器承载。
text-align: center 适合纯水平居中且兼容老浏览器
这是最轻量、IE8+ 全支持的方案，但仅限水平方向，且依赖图片为行内元素（<img> 默认就是）。关键在作用对象：必须加在父容器上，不是 <img> 自身。
- 常见失效：给
<img>写style="text-align: center"→ 完全无效 - 父容器若用了
float、display: inline-block或被内容撑窄 → 宽度不明确，居中偏移 - 父容器里混了
<div>等块级子元素 → 它们不受影响，仍靠左 - 响应式配合：父容器设
width: 100%，图片加max-width: 100%和height: auto防变形
示例：<div style="text-align: center; width: 100%;"><img src="logo.png" style="max-width: 100%; height: auto;"></div>
flex 布局实现视口级响应式居中
现代项目首选，justify-content: center + align-items: center 一行解决二维居中，天然响应窗口缩放。但容易漏掉高度约束，导致垂直方向失效。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确高度参照，比如
height: 100vh或min-height: 300px；否则align-items: center没空间可居中 - 别直接在
<body>上加display: flex→ 会让所有直系子元素变成 flex item，破坏原有结构 - 旧 Android（4.4 及以下）需加
display: -webkit-flex前缀 - 图片自身推荐用
max-width: 90vw（留边距）+height: auto，避免宽屏下过满
示例：<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"><img src="hero.jpg" style="max-width: 90vw; height: auto;"></div>
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
grid 的 place-items: center 最简双向居中
比 flex 更简洁，place-items: center 是 justify-items 和 align-items 的合并写法，语义清晰，代码少一倍。但兼容性略弱于 flex（IE 不支持）。
- 同样要求父容器有明确高度，
height: 100vh是最常用选择 - 无需额外设置
justify-content或align-items，避免写漏 - 若父容器是
<main>或带语义的区块，用 grid 更符合现代布局语义 - 注意：和 flex 一样，
<img>本身不加display: grid—— 它不是容器
示例：<div style="display: grid; place-items: center; height: 100vh;"><img src="icon.svg" style="max-width: 100%; height: auto;"></div>
margin: 0 auto 仅适用于固定宽/响应式块级图片
这个组合看似简单，但三个条件缺一不可：图片得是块级、得有可计算宽度、父容器不能是 flex/grid。很多人卡在“为什么加了没反应”上，其实只是漏了其中一项。
- 必须设
display: block，否则margin: 0 auto对行内元素无效 - 宽度不能是
width: 100%或max-width: 100%—— 这些值无法让浏览器算出“剩余空间”，auto就会退化为 0 - 若用响应式，可写成
width: min(600px, 90vw)，既限制上限又随视口缩放 - 它完全不管垂直方向，图片仍贴顶；如需垂直居中，得配合
padding-top或外层 flex
示例：<img src="avatar.jpg" style="display: block; width: min(400px, 90vw); margin: 0 auto; height: auto;">
真正容易被忽略的是：几乎所有居中失效，都不是方法错了，而是被其他样式干扰了——比如图片加了 float 脱离文档流，或父容器被 position: absolute 拉塌了高度，又或者 CSS 优先级被更高权重的规则覆盖。先检查这些，再换方案。
