图片移动端居中异常主因是img默认行内特性受line-height、vertical-align等影响，最直接解法是设display: block；flex居中需确保父容器有明确宽高约束，避免height: 100%导致计算失败；picture元素需显式设display: block；优先用flex或text-align居中替代transform以规避缩放偏差。
图片在移动端居中后左右留白或错位
多数情况不是图片没居中，而是 img 默认是行内元素，受父容器的 line-height、vertical-align 和空白字符影响，在 flex 或 text-align 居中时容易出现 2–4px 的底部偏移。尤其当父容器高度固定、或设置了 font-size: 0 但未同步处理子元素时，问题更明显。
- 给
img加display: block是最直接解法，彻底脱离行内流 - 若必须保留行内行为（如配合文字混排），改用
vertical-align: middle或top，避免默认的baseline - 检查父容器是否意外继承了
font-size，导致行高撑开；可对父容器设font-size: 0，再对img单独设字体大小（极少需要）
flex 布局下图片不居中或被拉伸
用 display: flex + justify-content: center + align-items: center 看似稳妥，但常见两个坑：一是图片本身有 max-width: 100% 但父容器没设 width 或 max-width，导致 flex 容器宽度坍缩；二是图片设置了 height: 100% 但父容器高度未明确（比如仅靠内容撑开），造成尺寸计算失败。
- 确保父容器有明确宽度约束，例如
width: 100vw或max-width: 100% - 移除图片上可能存在的
height: 100%或width: 100%，改用max-width: 100%+height: auto保比例 - 若需等比缩放且居中，加
object-fit: contain并确保父容器有固定宽高比（如用aspect-ratio或 padding-bottom hack）
使用 picture + srcset 后居中失效
当用 <picture> 包裹多个 <source> 时，浏览器仍只渲染一个 <img>，但部分旧版 Safari 或 Android Webview 会对 <picture> 元素本身应用默认样式（比如 display: inline），导致其不响应父级的 flex/center 设置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 显式给
<picture>设display: block或display: flex（如果它就是容器） - 不要只给内部
<img>写样式，<picture>也需要参与布局控制 - 在
<img>上加width: 100%时，务必确认父<picture>已设display: block，否则 100% 会按行内宽度计算
viewport 和缩放导致视觉居中偏差
有些机型（尤其是 iOS Safari）在双击放大、或用户手动缩放后，transform: translate(-50%, -50%) 类居中方式会因视口缩放因子失准，看起来偏左/偏上。这不是代码 bug，而是 CSS 像素与设备像素映射关系变化所致。
立即学习“前端免费学习笔记（深入）”；
- 优先用
flex或text-align: center替代绝对定位 + transform - 避免在
meta viewport中设置user-scalable=no—— 虽能禁缩放，但损害可访问性，且不解决根本问题 - 如必须用 transform，加上
will-change: transform提升图层，减少重绘抖动，但不能修复缩放偏差
img 的显示类型、父容器的尺寸来源、以及响应式断点中媒体查询是否覆盖了所有设备像素比共同作用的结果。调试时建议先禁用所有 srcset 和 <picture>，用一张静态 <img> 复现问题，再逐层加回特性。 
