最快居中法是display: flex + justify-content: center + align-items: center，但需父容器有高度且图片在文档流中；text-align: center仅对行内子元素有效且须写在父容器上；margin: 0 auto需img为block并有可计算宽度；响应式应控制容器对齐而非图片尺寸。
直接用 display: flex + justify-content: center + align-items: center 最快，但父容器没高度、图片脱离文档流、或你误改了 <img> 自身样式，都会让它“看起来没动”。
为什么 text-align: center 有时点了没反应
它只对父容器生效，且只影响行内子元素——<img> 默认就是行内，所以多数情况管用；但一旦出问题，几乎都卡在这几个点：
- 把
text-align: center写在<img>标签上 → 完全无效，必须写在包裹它的<div> 或 <code><p></p>上 - 父容器加了
float、display: inline-block或宽度塌缩（比如空<div>）→ 没“可居中空间”，浏览器直接放弃计算 <li>父容器里混了 <code><div> 这类块级子元素 → 它们不响应 <code>text-align，却会撑高/挤宽容器，导致图片视觉偏移 - 忘了给图片加
max-width: 100%和height: auto→ 窄屏下溢出，你以为“居中失败”，其实是图跑出视口了 -
<img>没加display: block→ 行内元素无视margin: auto，写了等于没写 - 用了
max-width: 100%却没配显式width→ 浏览器无法算出“剩余空间”，左右 margin 自动归零 - 父容器是
display: flex或display: grid→ 布局模式接管定位，margin被忽略 - 图片加了
position: absolute或float→ 脱离文档流，所有基于流的居中逻辑全部失效 - 别依赖父容器“自动撑高”：如果父容器没内容、没设
height或min-height，align-items就无从下手 -
height: 100vh最快，但页面有<header></header>或<footer></footer>时会遮挡内容；更稳的是min-height: 400px或按区块设定最小高度 - 别直接在
上设display: flex→ 所有直系子元素（比如多个<p></p>）都会变成 flex item，原有结构全乱 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀，否则justify-content不解析 - 基础层统一写：
<img style="max-width:90%">—— 所有断点复用，不重复定义 - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } }（兼容性好）或{ display: flex; justify-content: center; } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } }（若用 flex，则换justify-content: flex-end） - 如果父容器已用 flex 布局，就别混用
text-align，否则被忽略
margin: 0 auto 写了却不动？检查这三处
这个组合不是“设了就居中”，而是有严格前提的块级居中方案，静默失效最常见：
Flex 居中总“只水平不垂直”，高度从哪来
justify-content: center 控水平，align-items: center 控垂直——但后者必须有交叉轴（通常是高度）参照，否则就是在 0px 高的空间里“居中”，结果只能贴顶：
响应式切换对齐方式，别碰图片尺寸
媒体查询的目标不是重写 img { width: 100% }，而是控制父容器的对齐行为本身。图片尺寸靠一次设置搞定，对齐逻辑交给容器：
真正容易被忽略的是：居中不是图片自己的属性，而是它所处容器的布局上下文。写完 justify-content: center 后，先看父容器有没有高度，再确认图片还在文档流里——这两步跳过，再多代码也白搭。
