用position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)可稳定居中；因top/left仅移左上角至视口中心，需transform反向偏移自身宽高一半才能真正居中，缺一不可。
用 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%) 是最可靠的方式，不依赖宽高、不触发重排、响应式安全——漏掉任一环节都会偏移。
为什么只写 top: 50% 和 left: 50% 会偏右下？
这两个值只是把模态框的左上角锚点移到视口中心，不是整个框居中。视觉上它卡在右下四分之一区域。必须靠 transform: translate(-50%, -50%) 把它向左、向上各拉回自身宽高的一半，才算真正对齐中心。
常见错误现象：
- 模态框弹出后右下角贴着屏幕边缘
- 内容变多时框变宽，但位置没动，看起来“越来越偏右”
- 用
rem或%设置宽高，却用固定px写margin负值，结果错位
position: fixed 还是 position: absolute？
优先选 position: fixed：它让元素脱离文档流、始终相对于视口定位，滚动页面也不飘。若用 position: absolute，必须确保其**直接父容器**有 position: relative（比如遮罩层 .modal-overlay），否则定位基准会上溯到 body 或更外层，一滚动就错位。
立即学习“前端免费学习笔记（深入）”；
移动端 Safari 的特殊坑：
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
- 键盘弹出或页面滚动时，
position: fixed可能被降级为absolute，导致定位基准突变 - 稳妥解法是改用
position: absolute+ 父容器min-height: 100vh+position: relative - 别指望
viewport-fit=cover修这个，它管刘海屏，不管定位失效
IE11 和 iOS Safari 的隐藏兼容问题
transform: translate(-50%, -50%) 在 IE11 和部分 iOS 版本里可能静默失效，不是代码写错了，而是渲染链被干扰。
排查要点：
- IE11：检查是否同时用了
filter（如drop-shadow()）、will-change或backface-visibility，这些会让transform被忽略 - IE11：确保
transform声明写在transition之后（解析顺序敏感） - iOS Safari（尤其 15–16）：加
will-change: transform；仍异常可试transform: translate3d(-50%, -50%, 0)强制 GPU 加速
width 和 max-width 不设会撑满全屏
position: fixed 下，width: auto 会让浏览器按视口宽度计算，极易撑满。这不是居中失败，是框太大了。
实操建议：
- 显式写
width: 90%或width: 500px - 加
max-width: calc(100vw - 40px)防窄屏溢出 - 配
box-sizing: border-box，避免padding撑破宽度 - 打开模态框时给
body加overflow: hidden，关掉时恢复原始值（别硬写auto）
真正麻烦的从来不是写法本身，而是当 transform 和 fixed 同时存在，又遇上父级 overflow: hidden、scale() 或 iOS 键盘弹起时，那个差 1px 的偏移——它不会报错，只会让你反复刷新、怀疑人生。
