margin: 0 auto 对 img 无效因 img 默认 inline，需设 display: block、显式 width 且父容器非 flex/grid；text-align: center 必须作用于父容器；flex 居中需父容器 display: flex、justify-content 和 align-items 均设置，并有明确高度。
直接用 margin: 0 auto 或 text-align: center 很大概率失败——不是写法错，而是没处理好图片的显示模式、父容器高度约束和响应式上下文。
为什么 margin: 0 auto 对 <img> 没反应
因为 <img> 默认是行内元素，margin: auto 对它完全不生效。必须同时满足三个条件：
-
display: block（或inline-block），否则浏览器直接忽略margin - 有可计算的宽度：比如显式设
width: 300px，但别用width: 100%或max-width: 100%——后者会让左右 margin 变成 0 - 父容器不能是
flex、grid、absolute或float，否则会接管居中逻辑，margin被覆盖
text-align: center 必须加在父容器上，且只管水平
很多人把 text-align: center 写在 <img> 标签里，这毫无作用。它只对父容器内的行内级内容起效，所以：
- 必须加在包裹
<img>的<div>或<p>上 - 图片自身保持默认
display: inline（或加display: inline-block防止底部空白） - 它不管垂直方向：小屏下图片仍贴顶，需配合
line-height、padding或外层 flex 容器 - 如果父容器用了
font-size: 0（常见于清除 inline 间隙），图片可能高度塌缩，要额外处理
Flex 布局实现真正响应式双向居中
这是目前最可靠的方式，但三要素缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，不是<img>自身 - 同时写
justify-content: center（水平）和align-items: center（垂直） - 父容器必须有明确高度参照，比如
min-height: 400px或height: 100vh；否则交叉轴长度为 0，“居中”无从计算 - 图片只需
max-width: 100%+height: auto，不用设width或height
典型结构：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <img src="photo.jpg" alt="logo" style="max-width: 90vw; height: auto;"> </div>
响应式切换对齐方式时，别重复定义图片尺寸
媒体查询的核心是“按断点切换容器行为”，不是反复重写图片样式：
- 图片尺寸统一在基础层控制：
max-width: 100%+height: auto就够了 - 对齐方式交给父容器：小屏用
text-align: center，大屏用justify-content: flex-end - 避免在每个
@media里都写img { width: 100% }——冗余且易冲突 - 如果父容器用了固定宽度（如
width: 1000px），窄屏下会强制横向滚动，图片看似“居中失败”，其实是容器没响应
真正容易被忽略的是父容器高度是否塌陷、图片是否意外脱离文档流（比如加了 position: absolute），这些都会让 flex 居中彻底失效。
