响应式图片居中关键在于控制父容器：text-align:center仅对inline图片在块级父容器中水平居中有效；flex布局需同时设justify-content和align-items并确保父容器有高度；媒体查询应切换容器对齐方式而非图片尺寸。
响应式图片居中，关键不是“让图片自己居中”，而是**控制它所处的容器上下文**——图片本身没有固有居中能力，所有居中行为都由父容器的布局模式和尺寸约束共同决定。
text-align: center 只管水平，且必须作用在父容器上
这是最轻量、兼容性最好的水平居中方式，但极易写错位置。
-
text-align: center写在<img>标签上完全无效，它只对块级父容器生效 - 图片必须保持默认
display: inline（不加display: block或float），否则脱离行内流，text-align失效 - 父容器不能是
display: flex或display: grid，否则会接管子元素对齐逻辑 - 若父容器用了
font-size: 0清间隙，图片可能被压缩或消失，需重置font-size或改用flex
适用场景：图文混排段落、卡片内单图、简单 banner。示例：<div style="text-align: center"><img src="logo.png"></div>
flex 布局实现水平+垂直居中，父容器高度不能塌
现代项目首选，但“只写 justify-content: center”是高频翻车点——align-items: center 必须同时存在，且父容器得有可参考的高度。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须设在父容器上：
display: flex; justify-content: center; align-items: center; - 父容器需明确高度，比如
height: 100vh、min-height: 400px；否则align-items没空间可居中，图片只会水平居中、垂直贴顶 - 图片自身加
max-width: 100%; height: auto;，防止溢出或拉伸 - 旧 Android 4.4 及以下需加
display: -webkit-flex;前缀
示例：<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"><img src="hero.jpg" style="max-width: 100%; height: auto;"></div>
响应式对齐要用媒体查询切换容器行为，别重复定义图片尺寸
小屏居中、中屏左对齐、大屏右对齐，核心不是改 <img>，而是通过媒体查询切换父容器的 text-align 或 justify-content。
- 错误做法：每个断点都写
img { width: 100% }—— 这和对齐无关，纯属冗余 - 正确思路：只覆盖对齐方式，例如
@media (min-width: 769px) { .img-container { text-align: left; } } - 若用 flex，对应改
justify-content: flex-start/flex-end/center - 避免给父容器设固定宽度或浮动，否则会干扰媒体查询下的对齐计算
注意：对齐方式切换时，max-width 和 height: auto 应始终保留在图片样式里，确保缩放一致性。
真正容易被忽略的是“容器上下文”的稳定性——float、position: absolute、display: inline-block 等任意一个属性，都可能让看似正确的居中代码彻底失效。调试时优先检查父容器的 display 类型和尺寸是否如预期，而不是反复修改图片样式。
