根本原因是浏览器在图片尺寸未知时无法预留占位空间，必须通过width/height、aspect-ratio或padding-top等手段提前确定容器尺寸，否则加载完成触发重排导致跳位。
图片加载完成前位置偏移、闪动、或加载后突然跳位，根本原因不是“没居中”，而是浏览器在图片尺寸未知时无法正确计算布局——必须让容器在图片加载前就具备可预测的占位空间。
为什么图片加载后会“跳一下”才居中
浏览器解析 HTML 时，<img> 默认是行内元素，且初始尺寸为 0×0（除非写了 width 和 height 属性）。此时 margin: 0 auto 或 justify-content: center 都有据可依，但一旦图片加载完成、真实尺寸注入，布局重排就会触发视觉跳动。
- 没设
width和height属性 → 浏览器无法预留空间，父容器高度塌陷 - 用了
max-width: 100%却没配height: auto→ 宽高比失衡，缩放后位置偏移 - 父容器用
min-height但值太小（如min-height: 200px），而图片实际高度远超该值 → 垂直居中基准错乱 - 图片在
<figure>或富文本编辑器里被自动包裹，外层结构带默认 margin/padding，干扰计算
用 aspect-ratio + max-width 实现无跳动占位
现代浏览器（Chrome 103+、Firefox 110+、Safari 16.4+）支持 aspect-ratio，它能让容器在图片加载前就按宽高比预留空间，彻底避免跳动。
正确写法：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
<img src="photo.jpg"
alt="示例图"
style="max-width: 90vw; height: auto; aspect-ratio: 4/3;">
</div>
-
aspect-ratio: 4/3必须写在<img>上，不是父容器——它直接作用于替换元素，告诉浏览器“这个图片天生是 4:3” -
max-width: 90vw控制最大宽度，height: auto确保等比缩放，二者与aspect-ratio协同生效 - 旧浏览器不支持
aspect-ratio？退而求其次：在<img>标签里显式写width="800" height="600"（原始尺寸），CSS 中再覆盖max-width: 100%
移动端加载闪动的兜底处理
iOS Safari 和部分安卓 WebView 在图片加载瞬间仍可能闪动，尤其当父容器高度依赖内容时。这时不能只靠 CSS，得加一层防御性约束：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
overflow: hidden，防止图片加载瞬间撑出滚动条或溢出边界 - 避免用
height: 100vh—— iOS Safari 在地址栏收起/展开时会重算vh，导致容器高度突变；改用min-height: 100vh更稳 - 如果图片来自 CMS 或编辑器（如古腾堡、Zakra），检查是否生成了
<figure class="wp-block-image aligncenter">这类结构；它的默认样式可能覆盖你的居中逻辑，需用!important强制重置或用更具体的选择器 - 对关键首屏图片，可在
<img>上加loading="eager"，减少加载延迟带来的布局不确定性
别忽略 loading 状态下的 placeholder 占位
真正“加载后居中不跳”的完整链路，包含加载中的视觉一致性。纯 CSS 无法监听加载完成，但可以用简单 HTML 结构模拟稳定占位：
<div style="display: flex; justify-content: center; align-items: center; min-height: 50vh;">
<div style="width: 100%; max-width: 90vw; aspect-ratio: 4/3; background: #f5f5f5;">
<img src="photo.jpg"
alt="示例图"
style="width: 100%; height: 100%; object-fit: contain;">
</div>
</div>
- 外层
<div>提供明确宽高比和最小容器高度，确保加载前就有空间 -
object-fit: contain是安全的——它只对<img>在固定尺寸容器内生效，不会影响响应式缩放逻辑 -
background仅作占位提示，上线时可移除；若需骨架屏，替换为 SVG 更轻量
最易被忽略的点：图片宽高比必须真实。拿错比例（比如把 16:9 图片写成 4:3）会导致加载后容器重排，跳动照旧。校验方式很简单：右键图片 → “在新标签页打开”，看地址栏 URL 后缀或开发者工具的 Dimensions。
