最稳的响应式水平居中方案是父容器设 text-align: center，同时图片加 max-width: 100% 和 height: auto；因为 img 默认 inline，margin: 0 auto 对其无效，而 text-align: center 天然兼容响应式且无需固定宽。
直接给 <img> 加 margin: 0 auto 不生效，是因为它默认是行内元素；最稳的响应式水平居中方案是父容器设 text-align: center，同时图片加 max-width: 100% 和 height: auto。
为什么 margin: 0 auto 单独写在 <img> 上没用
因为 <img> 默认是 display: inline，而 margin: auto 对行内元素水平方向无效。必须满足三个条件才可能生效：
- 显式设置
display: block或inline-block - 有可计算的宽度（比如固定值、
width: 300px；但width: 100%或max-width: 100%会让auto失去参照） - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为
响应式场景下，图片宽度常依赖视口，所以硬设 width 不现实——这时 margin: 0 auto 就不适合直接用在 <img> 上。
用 text-align: center 是最轻量且兼容的解法
这个方法不操作图片本身，而是让父容器把图片当文字来排版。它天然适配响应式，只要父容器宽度随视口变化，居中就一直有效。
立即学习“前端免费学习笔记（深入）”；
-
text-align: center必须写在父容器（如<div>）上，写在<img>标签里完全无效 - 父容器建议设
width: 100%或不设宽（靠内容撑开），避免因浮动、绝对定位或display: inline-block导致宽度塌陷 - 图片自身加
max-width: 100%+height: auto，防止窄屏溢出、宽屏拉伸 - 如果父容器用了
font-size: 0（常见于清除 inline 间隙），记得给<img>单独设font-size: initial，否则图片可能消失
示例：
<div style="text-align: center; width: 100%;"><img src="logo.png" style="max-width: 100%; height: auto;"></div>
媒体查询切换对齐方式时，只改父容器的 text-align
响应式对齐不是“每个断点都重写图片尺寸”，而是按需切换父容器的文本对齐行为。这样语义清晰、维护成本低。
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } }
注意：别在每个断点里重复写 img { width: 100% } ——尺寸约束应该统一写在基础样式里，媒体查询只管对齐逻辑。
如果父容器已用 flex 或 grid，别混用 text-align
一旦父容器设了 display: flex，text-align 就基本失效（除非子元素是 inline 且未被 flex item 规则覆盖）。此时水平居中应靠 justify-content: center，但要注意：
-
justify-content只控制主轴（默认水平），align-items才管垂直；如果只要水平居中，align-items可不设 - 父容器若无明确高度，
justify-content: center仍有效，但align-items: center会因无空间而看不出效果 - 旧 Android（4.4 及以下）需加
-webkit-justify-content前缀
真正容易被忽略的是：很多开发者在 flex 容器里还试图给 <img> 加 margin: 0 auto，这不仅多余，还可能因浏览器解析优先级导致意外交互。
