calc()合法但生效需满足前提：position非static、包含块高度明确（否则50%为0），且加减运算符两侧必须有空格；支持混合单位及CSS变量（变量须带单位）。
calc() 中混合单位的运算规则必须明确
浏览器不允许直接写 top: calc(50% - 20px) 这种表达式就自动生效——它确实合法，但**生效前提是父容器有明确高度且定位上下文正确**。很多情况下元素“没动”，不是 calc() 写错了，而是 position 没设或父级没参与文档流。
-
top、left等偏移属性只对position: relative、absolute、fixed生效；static下完全忽略 - 百分比值（如
50%）在top中是相对于**包含块的高度**计算的，不是视口也不是自身尺寸 -
calc(50% - 20px)是合法表达式，但若包含块高度为auto（比如普通div未设高），那50%实际解析为0px，结果就是-20px
居中一个固定尺寸元素时 calc 的典型写法
想让一个宽高已知的弹窗垂直水平居中，常见错误是只写 top: calc(50% - 20px) 却忘了配 left 和 transform 的替代方案。其实更稳妥的做法是组合使用：
- 设
position: absolute，父容器需有position: relative或其它非static定位 - 用
top: 50%+left: 50%把左上角锚到中心点 - 再用
transform: translate(-50%, -50%)回拉自身宽高的一半（无需知道具体像素值） - 如果坚持纯
calc，且宽高已知（比如width: 300px; height: 200px），可写：top: calc(50% - 100px);<br>left: calc(50% - 150px);
动态偏移中 calc 与 CSS 变量配合的关键细节
真正需要“动态”的场景，比如偏移量来自 JS 控制或主题配置，就得靠 calc() 结合自定义属性。但注意：CSS 变量不能直接参与 calc() 运算，除非它本身是带单位的合法值。
- ✅ 正确：
:root { --offset: 20px; }<br>.box { top: calc(50% - var(--offset)); } - ❌ 错误：
:root { --offset: 20; }<br>.box { top: calc(50% - var(--offset) * 1px); }（CSS 不支持乘除运算符作用于变量） - JS 修改时必须带单位：
el.style.setProperty('--offset', '24px')，不能只传数字 - 百分比变量也要带
%：--ratio: 60%;，然后width: calc(var(--ratio) + 10px)才有效
IE 和旧版 Safari 对 calc 的兼容陷阱
calc() 在 IE9+ 支持，但存在几个经典坑，尤其影响 top/left 类偏移：
立即学习“前端免费学习笔记（深入）”；
- IE10/11 不支持空格省略：必须写
calc(50% - 20px)，不能写calc(50%-20px)或calc(50% -20px) - Safari calc() 支持极差，比如
calc(calc(100% / 3) - 10px)会直接失效 - 所有浏览器都不允许在
calc()中混用不兼容单位，例如calc(1em + 10vh)在部分安卓 WebView 中可能被忽略 - 调试时看 computed styles：如果浏览器不支持或语法错，DevTools 里
top值会显示为初始值（如auto），而不是报错提示
实际项目里最常被忽略的，是把 calc(50% - 20px) 当成万能居中解法，却没确认父容器是否构成有效的包含块——尤其是 flex 或 grid 容器里的子项，其“包含块”可能并非直观所想的那个父 div。
