根本原因是img默认为行内元素，而margin:0 auto仅对块级元素有效；必须同时满足：设display:block、有明确宽度、父容器非flex/grid布局。
为什么 margin: 0 auto 加在 <img> 上没反应
根本原因是 <img> 默认是 display: inline，而 margin: auto 对行内元素完全无效。它只对块级元素起作用，且必须满足三个硬条件：
-
display: block或inline-block（缺一不可） - 有可计算的宽度：比如
width: 300px；max-width: 100%不行，浏览器无法推导“剩余空间” - 父容器不能是
display: flex或display: grid，否则 margin 行为被接管
响应式场景下，图片宽度常随视口变化，硬写固定 width 不现实——所以这个方案只适合尺寸固定的图标类图片，不适合主图、Banner 等响应式图片。
text-align: center 在什么情况下会失效
它只作用于父容器，并且只影响其内部的行内级子元素（如默认状态的 <img>）。常见翻车点包括：
- 父容器用了
float、position: absolute或display: inline-block，导致自身宽度塌缩，没有“可居中”的上下文 - 父容器里混了
<div>这类块级子元素，它们不受text-align影响，可能把图片挤偏 - 父容器设了
font-size: 0（常用于清除 inline 间隙），但没给<img>单独加font-size: initial，图片直接消失 - 写了
text-align: center却加在<img>自身上——完全无效
这个方法轻量、兼容性好（IE8+），但仅解决水平居中；垂直方向始终贴顶，不适用于需要“视口级居中”的场景。
立即学习“前端免费学习笔记（深入）”；
用 display: flex 实现双向居中，为什么图片总贴顶
justify-content: center 控制水平，align-items: center 控制垂直——但后者依赖父容器在交叉轴（通常是高度）上有明确尺寸。没有高度，就等于让浏览器“在 0px 高的空间里居中”，结果必然是贴顶。
- 推荐用
min-height: 100vh而不是height: 100vh：前者确保至少占满一屏，同时允许内容撑高；后者会强制截断溢出 - 别直接在
<body>上设display: flex：它会让所有直系子元素（如多个<p>）都变成 flex item，破坏原有文档流 - 图片必须加
max-width: 100%和height: auto，否则宽屏下溢出、窄屏下拉伸变形 - 旧 Android 4.4 及以下需补
display: -webkit-flex和对应前缀
真正容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个高度是否可被浏览器稳定计算”。例如 height: 100% 很可能无效，因为上级容器未必有显式高度。
媒体查询切换对齐方式时，为什么图片尺寸乱了
错误做法是在每个断点里重复写 img { width: 100% } 或 max-width: 100%。这既冗余又易冲突，而且混淆了“尺寸约束”和“对齐行为”两个职责。
- 图片尺寸应统一在基础层定义：
max-width: 90vw; height: auto;（留边防紧贴边缘） - 对齐方式交给父容器控制：
text-align: center（兼容旧环境）或justify-content: center（flex 布局） - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }（若用 flex）
关键在于：媒体查询的目标不是重定义图片本身，而是切换容器的排版指令。一旦把尺寸和对齐混写，维护成本陡增，bug 出现概率也大幅上升。
