img默认为行内元素，margin: 0 auto不生效；需父容器text-align: center或设display: block+width约束，配合max-width: 100%和height: auto实现响应式居中。
直接给 <img alt="如何使用HTML设置响应式图片水平居中" > 加 margin: 0 auto 不生效，是因为它默认是行内元素；响应式水平居中必须先让它“可计算左右空隙”，再配合宽度约束和父容器行为控制。
为什么 margin: 0 auto 单独写在 <img alt="如何使用HTML设置响应式图片水平居中" > 上没用
浏览器对行内元素（包括默认的 <img alt="如何使用HTML设置响应式图片水平居中" >）不解析 margin: auto 的左右值。这不是 bug，而是规范行为。
- 必须显式加
display: block或display: inline-block -
width或max-width要有明确参照：比如max-width: 100%依赖父容器宽度，width: 320px是固定值 - 如果父容器是
display: flex或float，margin: 0 auto会被忽略 - 别在
<img alt="如何使用HTML设置响应式图片水平居中" >上写text-align: center——这个属性只作用于容器，对自身无效
推荐写法：父容器 text-align: center + 图片保持 inline
这是最轻量、兼容性最好、且天然响应式的方案，尤其适合图文混排或 banner 类场景。
- 父容器设
text-align: center，图片保持默认display: inline即可 - 图片加
max-width: 100%和height: auto，防止窄屏溢出或拉伸 - 若父容器用了
font-size: 0（常用来清除 inline 元素间隙），记得给图片单独设font-size: initial或改用vertical-align: top - 示例：
<div style="text-align: center"><img src="logo.png" style="max-width:90%" alt="如何使用HTML设置响应式图片水平居中" ></div>
进阶控制：用媒体查询切换对齐方式
响应式不是“永远居中”，而是按断点动态调整——比如小屏居中、桌面左对齐、大屏右对齐。
立即学习“前端免费学习笔记（深入）”；
- 只在父容器上定义
text-align，用媒体查询覆盖它，不要重复写图片尺寸 - 避免对
<img alt="如何使用HTML设置响应式图片水平居中" >自身写媒体查询，否则容易和父容器行为冲突 - 示例：
@media (max-width: 768px) { .img-wrap { text-align: center; } }<br>@media (min-width: 769px) and (max-width: 1200px) { .img-wrap { text-align: left; } }<br>@media (min-width: 1201px) { .img-wrap { text-align: right; } } - 如果已用 flex 布局，就替换
text-align为justify-content: flex-start / center / flex-end
真正容易被忽略的是父容器的“宽度上下文”：如果它没内容又没设宽，或者被 float 或 position: absolute 撑塌了，text-align: center 就会失效——居中不是图片的问题，是它站的那个“地”没铺平。
