用 box-sizing: border-box + position: fixed + transform: translate(-50%, -50%) 可实现边框纳入居中计算的精准居中；仅 top: 50% 和 left: 50% 会使左上角定位中心，边框和 padding 向外撑导致偏移，而 transform 按含边框总尺寸计算，box-sizing: border-box 确保 width 包含 padding 和 border，避免错位。
直接结论：用 box-sizing: border-box + position: fixed + transform: translate(-50%, -50%)，边框就自动纳入居中计算，无需手动减去像素。
为什么不能只靠 top: 50% 和 left: 50% 居中？
这两个值只把元素左上角钉在视口中心，边框、padding 全算在“往外撑”的部分里——结果弹窗整体偏右下。尤其当边框是 2px solid #333、内边距是 24px 时，视觉偏移肉眼难判，但就是“差那么一点”。必须配 transform: translate(-50%, -50%)，它按元素自身宽高（含 border 和 padding）做百分比位移，天然兼容 border-box 模式。
box-sizing: border-box 是居中计算的底层保障
默认 box-sizing: content-box 下，width: 400px 只管内容区，加上 padding: 20px 和 border: 2px 后，实际占宽变成 444px。居中逻辑却仍按 400px 算中心点，错位由此产生。
- 加
box-sizing: border-box后，width: 400px表示“边框盒总宽”，浏览器自动从里面扣掉 padding 和 border，留给内容的只剩356px - 此时
transform: translate(-50%, -50%)的 -50% 基准就是这 400px，不漂不抖 - 全局重置推荐：
* { box-sizing: border-box; }，避免漏写
边框影响居中的典型翻车场景
以下情况哪怕用了 transform 也会出偏：
- 父容器用了
position: absolute且没设position: relative上级，导致fixed弹窗基准错乱 - iOS Safari 键盘弹出时
visualViewport高度突变，fixed仍按原始视口定位，需监听resize或keyboardWillShow微调top - 弹窗内容异步加载后高度暴涨，但
transform不触发重排——得临时加 class 改display: none → block强制重绘 - 遮罩层（overlay）和弹窗没同级，比如把弹窗塞进
div.overlay里，遮罩的z-index就盖不住弹窗
真正麻烦的不是写法，而是动态尺寸下的“静默偏移”
边框本身不会让居中失效，但它是放大器：当内容撑高、字体加载完成、图片渲染就绪，整个盒子尺寸变了，而 transform 不感知这些变化。这时候你看到的不是“居中失败”，而是“一开始居中，过两秒往上浮了一截”——最容易被忽略，也最难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
