最稳的移动端图片居中方案是：用 text-align: center 做水平兜底，display: -webkit-flex/display: flex 做双向居中，并配 min-height 和 -webkit-flex 前缀，避免 ios safari flex bug、android height 偏差及加载闪动。
移动端图片居中不是“加个样式就行”，而是要绕开 iOS Safari 的 flex 渲染 bug、Android WebView 的 height 计算偏差、以及图片加载闪动导致的布局跳变。最稳的路径是：用 text-align: center 做水平兜底，display: flex 做双向居中，但必须配 min-height 和 -webkit-flex 前缀。
为什么 iOS 11 以下 Safari 的 flex 居中完全不生效
旧版 Safari（iOS 9–11）对标准 display: flex 视而不见，只认 display: -webkit-flex。只写一行 display: flex，在 iPhone 6/7 上图片会紧贴左上角——连水平都不居中。这不是代码写错了，是浏览器根本不解析这个声明。
- 必须显式写双声明：
display: -webkit-flex; display: flex; -
align-items: center在父容器没设min-height时无效：iOS 渲染器会在图片加载前就完成布局，此时交叉轴长度为 0，垂直居中直接跳过 - 如果父容器是
或<section></section>，且内部混有<p></p>等块级元素，display: flex会让所有子元素变成 flex item，文字和图片挤成一排——这不是居中，是错乱
手机端 margin: 0 auto 失效的三个硬条件
很多人在桌面端调好的 img { display: block; margin: 0 auto; } 一上手机就靠左，不是 CSS 写错了，是移动端触发了它的失效边界。
-
img没加display: block：移动端对行内元素的 margin 计算更严格，margin: auto直接被忽略 - 父容器宽度不可靠：比如用了
float、position: absolute，或主题框架（如 Zakra）注入了width: fit-content，导致auto无参照可分 - 图片写了
max-width: 100%却没配width: auto：浏览器认为“宽度已由 max-width 主导”，不再分配剩余空间，margin: 0 auto彻底失能
如何让图片在竖屏/横屏切换时不跳动
手机旋转时，常见图片突然上移、下移、或被截掉一半，根源是容器高度没跟上视口变化。用 height: 100vh 是陷阱，它锁死为初始视口高度，横屏后内容撑高，图片就被卡在顶部。
- 改用
min-height: 100vh：确保至少占满一屏，又允许内容自然撑开 - 图片加
max-height: 80vh+height: auto：防止单张高图在窄屏下撑爆屏幕、触发横向滚动条 - 避免在
上直接设 flex：会破坏段落流，推荐封装专用容器，如<div class="mobile-img-center"> <li>如果图片带链接（<code><a href><img></a>），记得给<a></a>加display: block：否则 inline 链接会干扰 text-align 对齐 - 统一基础样式：
.img-container img { max-width: 100%; height: auto; } - 对齐逻辑交给父容器：
@media (max-width: 768px) { .img-container { text-align: center; } }（兼容旧环境）或@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }（flex 场景） - 如果用
text-align方案，注意父容器别设font-size: 0（常用于清除 inline 间隙）：会导致图片消失，需单独给img加font-size: initial
响应式对齐切换别碰图片样式，只动父容器
想小屏居中、大屏右对齐？不要在每个媒体查询里重写 img 的 margin 或 display，那会导致样式冲突、维护困难，还容易漏掉 iOS 前缀。
真正难的不是写出居中代码，而是判断当前场景该用 text-align 还是 flex：纯水平居中、兼容性优先 → text-align；需要上下左右都稳、且能控制容器高度 → flex，但必须带 -webkit- 前缀和 min-height。这两条路不能混用，否则在某个机型上必崩。
