用 calc() 绝对居中偏移是因为 50% 基准与元素真实宽高不匹配；应优先用 transform: translate(-50%, -50%) 或 inset: 0 + margin: auto，calc() 仅适用于宽高明确且固定的场景。
用 calc() 做绝对居中时，为什么元素总偏一点？
因为 calc(50% - 50px) 这类写法看似正确，但前提是元素宽高固定且已知——而实际中，如果宽高是 auto、由内容撑开，或受字体、行高、box-sizing 影响，50px 就不是真实半宽/半高。偏移量必须严格对应元素自身的宽高一半，不能靠“目测”或“大概”。
- 若元素宽高动态（比如文字卡片、图片容器），优先改用
transform: translate(-50%, -50%)配合top: 50%; left: 50%，它基于渲染后的真实尺寸计算 - 硬要用
calc()，必须确保宽高明确：比如设了width: 200px; height: 100px，才能写left: calc(50% - 100px); top: calc(50% - 50px) -
box-sizing: border-box是默认值，但如果手动设过content-box，减去的值还得额外加回 padding 和 border
position: fixed 下 calc() 居中失效的典型表现
常见现象：滚动页面时元素乱跑，或在 Safari 中位置跳变。根本原因是 fixed 元素的 50% 是相对于视口计算的，但如果你同时用了 transform 或嵌套了有 transform 的父容器，会触发新的包含块，导致百分比基准错乱。
- 避免在
position: fixed元素上再叠加transform（除非你清楚层叠上下文影响） - 安全写法是纯
calc()：例如top: calc(50vh - 50px); left: calc(50vw - 100px)，用vh/vw明确锚定视口单位 - 注意
vh在移动端 Safari 中可能因地址栏显示/隐藏变化而抖动，此时更适合用position: absolute+inset: 0配合margin: auto
IE11 对 calc() 在定位中的兼容性坑
IE11 支持 calc()，但不支持在 top/left 等偏移属性中混用单位（比如 calc(50% - 1rem)），会直接忽略整条声明；也拒绝空格不规范的写法，如 calc(50%-10px)（必须有空格）。
- IE 友好写法只用 px 和 % 混合：
left: calc(50% - 120px)，避免rem、em、vh等 - 所有运算符前后必须有空格：
calc(50% - 10px)✅，calc(50%-10px)❌ - 如果项目必须兼容 IE11，更稳妥的是用 JS 动态读取
offsetWidth/offsetHeight计算并设置style.left/style.top
用 inset 替代 calc() 实现现代居中
inset 是 CSS Logical Properties 的一部分，在支持它的浏览器（Chrome 89+、Firefox 63+、Safari 14.1+）里，能一句话替代四行 top/left/bottom/right + calc()。
- 居中一个宽高已知的元素：
inset: 0; margin: auto;—— 它依赖块级格式化上下文，要求元素有明确宽高 - 配合
position: absolute或fixed使用，不需要手算任何偏移量 - 如果元素宽高不固定（比如文字弹窗），加一句
max-width: 90vw; max-height: 90vh;防止溢出，margin: auto仍生效
事情说清了就结束。真正难的不是写出 calc() 表达式，而是判断该不该用它——多数时候，transform 更鲁棒，inset + margin 更简洁，而 calc() 最适合那些必须精确到像素、且宽高完全可控的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
