calc()居中需配合position: absolute等定位属性才生效，且减号前后必须有空格；否则语法错误导致声明失效，应优先使用flex或grid居中。
calc() 居中必须配合 position: absolute 才生效
直接给元素写 top: calc(50% - 50px) 却没反应？大概率是忘了设 position。top、left 这类偏移属性只对 position: relative、absolute 或 fixed 元素起作用，calc() 本身不改变定位模式。
常见错误场景：
- 给
<img>直接加style="top: calc(50% - 20px)"—— 无效，因为<img>默认是inline，且无position - 父容器没设
position: relative，子元素用absolute会相对于 viewport 定位，导致“居中”错位
正确做法：
- 父容器加
position: relative - 子元素加
position: absolute - 再用
top: calc(50% - [height/2]px)和left: calc(50% - [width/2]px)
减号前后必须有空格，否则整个值被浏览器忽略
calc(100% - 50px) 是合法的，calc(100%-50px) 则是 Invalid property value —— 浏览器直接丢弃该声明，连 warning 都不一定报。
立即学习“前端免费学习笔记（深入）”；
CSS 规范明确要求：+ 和 - 两侧必须有空格；* 和 / 两侧可省略，但建议统一加空格保持可读性。
容易踩的坑：
- 复制粘贴时自动删掉空格（尤其从某些编辑器或文档里）
- 用 JS 动态拼接 style 字符串，漏了空格：比如
element.style.left = `calc(50%-${half}px)` - 在预处理器（如 Sass）中未转义，编译后空格被压缩
调试建议：打开 DevTools 的 Computed 面板，看对应属性是否显示为 strikethrough（删除线），如果是，大概率是语法错误。
替代 margin-top/margin-left 的 calc 写法更可控
传统居中常写 top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;，但 margin 值无法响应式变化——一旦宽高由媒体查询或 CSS 变量控制，margin 就得同步改，容易脱节。
用 calc() 把偏移逻辑收束到一行里，更易维护：
-
top: calc(50% - var(--size) / 2);（需搭配var(--size)定义） -
left: calc(50% - 1em);（当高度用em定义时） - 注意：
calc()中不能出现小数乘百分比，如calc(100% * 0.5)非法，必须写成calc(100% / 2)
性能提示：这种写法不触发额外重排，和纯 transform 相比略重，但比 JS 计算 + top/left 赋值轻量得多。
真正卡住人的不是 calc，而是它不感知 DOM 尺寸变化
calc() 的计算发生在样式解析阶段，它不知道元素最终渲染多高、有没有换行、图片是否加载完成。所以当你对一个 width: auto 或 height: auto 的元素用 top: calc(50% - 50px)，而实际高度是 120px，那结果就是偏上 20px。
典型失效场景：
- 文字内容动态插入后撑开高度，但
calc()没重算 -
<img>加载前尺寸为 0，calc(50% - height/2)中的height实际取的是 0 - 使用
font-size: clamp()时，rem在calc()中是静态解析的，后续字号变，偏移不变
解决思路优先级：
- 能用
flex或grid居中就别硬套calc()—— 它们天然响应尺寸变化 - 必须用绝对定位时，确保子元素尺寸确定（固定宽高、或用
aspect-ratio约束） - 动态内容场景下，
transform: translate(-50%, -50%)比top/left + calc()更鲁棒
