弹窗居中需 top: 50% 和 left: 50% 配合 transform: translate(-50%, -50%) 才真正居中，否则仅左上角对齐中心；推荐用 inset: 0 + flex 或 grid 居中更稳定，避免 transform 失效及移动端偏移问题。
为什么只写 top: 50% 和 left: 50% 弹窗总偏右下
因为这俩属性只是把弹窗左上角钉在视口中心点，不是让弹窗“中心对齐”。视觉上它永远往右下飘一点，差的就是自身宽高的一半。必须配 transform: translate(-50%, -50%)，这个负百分比是按弹窗自身尺寸算的，和父容器无关，也不怕内容动态撑开。
常见错误现象：
-
top: 50%; left: 50%单独存在 → 左上角居中，整体偏移 - 写了
transform但漏了负号 →translate(50%, 50%)直接飞出屏幕 - 用
margin-top: -100px这类固定像素 → 响应式一换屏就错位
position: fixed 必须设 inset: 0 或四边为 0 吗
不是必须，但强烈建议。只靠 top/left + transform 在滚动条出现、iOS 键盘弹出、或某些 WebView（如微信 X5）里容易偏移——因为 50% 的计算基准被滚动状态干扰了。
更稳的写法是：
- 先用
inset: 0（或top: 0; right: 0; bottom: 0; left: 0）让弹窗铺满整个视口 - 再用
display: flex; justify-content: center; align-items: center居中内容 - 这样不依赖
transform的渲染稳定性，也规避了 Safari 对fixed+transform的旧版 bug
注意：inset 在 Chrome 120+、Safari 17.4+、Firefox 115+ 支持；老版本直接 fallback 到四边写法即可。
移动端小屏下弹窗内容撑开后“上浮”怎么办
这是最隐蔽的问题：弹窗初始加载时居中正常，但异步内容（比如图片、富文本）加载完高度变大，transform 不会自动重算，视觉上就“往上飘了一截”。这不是 bug，是预期行为——transform 只在声明时计算一次。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
可行解法：
- 给弹窗根元素加
will-change: transform，强制浏览器持续追踪尺寸变化（慎用，可能耗性能） - 内容加载完成时，临时 toggle 一个 class 触发重绘：
element.style.transform = 'none'; setTimeout(() => { element.style.transform = 'translate(-50%, -50%)'; }, 0) - 换用
display: grid; place-items: center+height: 100dvh，Grid 会响应子元素尺寸变化自动重排（现代浏览器支持良好）
别指望 resize 事件监听弹窗本身——它不触发 resize；监听 window 又太粗粒度，容易误判。
遮罩层和弹窗要不要都用 flex 居中
不要。遮罩层（.modal-overlay）只需要覆盖全屏，用 position: fixed; top: 0; left: 0; width: 100%; height: 100% 就够了。如果再给它加 display: flex，一旦里面除了弹窗还有关闭按钮、加载指示器等其他元素，布局极易失控。
正确分工：
- 遮罩层负责覆盖、背景色、
z-index和overscroll-behavior: contain（防滚动穿透） - 弹窗自己用
position: fixed+transform或grid居中，与遮罩层解耦 - 避免在遮罩层上设
overflow: hidden——这会导致 iOS Safari 回弹、输入框失焦；用overscroll-behavior更干净
真正难的不是写几行 CSS，而是当弹窗内嵌了 iframe、select 或第三方组件时，z-index 层级、渲染上下文、以及 Safari 对 fixed 元素的合成策略会突然全部冒出来——这时候再补 JS 就晚了，得从结构设计阶段就预留隔离层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
