移动端居中失效主因是弹性滚动导致父容器高度塌陷，而非css错误；应优先确保父容器有显式高度（如min-height:100vh）、使用margin:auto替代transform居中，并通过overscroll-behavior:contain防止定位漂移。
移动端弹性滚动（overscroll bounce）本身不影响居中逻辑，但会让「视觉居中」在滚动瞬间失效——尤其是用 position: absolute + transform: translate(-50%, -50%) 的方案，容易因滚动时视口偏移、定位上下文错位而“跳一下”。真正稳的方案不是对抗弹性，而是绕过它。
flex 居中在 iOS Safari 中必须设 height 或 min-height
很多人写了 display: flex + justify-content: center + align-items: center，但在 iPhone 上一滚动就贴顶，问题不在 flex 本身，而在父容器高度塌陷。iOS Safari 对 height: 100% 解析更严格，且弹性滚动期间会临时重绘布局，若父容器没显式尺寸，align-items: center 就失去交叉轴参考。
- 强制拉满视口高：用
min-height: 100vh（不是height: 100vh），避免内容少时撑不满又不居中 - 确保根级容器有高度：
html, body { height: 100%; }必须写，否则min-height: 100vh在某些 iOS 版本下不生效 - 避免用
vh做全屏弹窗：Safari 的地址栏收起/展开会动态改变vh值，导致元素上下抖动；改用min-height: 100dvh（2023 年起支持）或 JS 动态设style.height
margin: auto 在 flex 容器里比你想象中更可靠
只要父容器是 display: flex，子元素直接加 margin: auto 就能二维居中，且完全不依赖宽高——这在移动端尤其有用，因为图片、字体加载延迟常导致尺寸未定，transform 方案会闪动，而 margin: auto 是布局阶段计算，无此问题。
- 子元素无需设
position，也不用管它是不是inline-block或block - 注意 Safari 旧版本（iOS 14.5 之前）对
margin: auto在 flex 交叉轴的支持有 bug，若需兼容，降级用align-items: center+min-height - 别和
position: absolute混用：一旦子元素设了position: absolute，margin: auto在 flex 容器里就失效
绝对定位方案要防 overscroll 导致的定位漂移
top: 50% + left: 50% + transform: translate(-50%, -50%) 在弹性滚动时可能“松动”，因为 top: 50% 是基于滚动前的视口计算，而弹性回弹会让元素短暂脱离预期位置。
- 父容器必须设
position: relative，且不能是body或html—— 否则定位上下文随 overscroll 变动 - 给子元素加
will-change: transform，提升合成层，减少回弹时的重绘抖动 - 禁用 overscroll 影响定位：在父容器上加
overscroll-behavior: contain，阻止弹性效果穿透到定位上下文
最容易被忽略的是：移动端居中失效，90% 不是 CSS 写错了，而是父容器在弹性滚动触发重排时“突然没高度了”。动手前先打开 Safari 开发者工具，检查目标父容器的 computed height 是否为 0 或 auto —— 那就是根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
