<p>calc()实现水平垂直居中需同时设置left: calc(50% - 宽度/2)和top: calc(50% - 高度/2)，依赖position: absolute及父元素relative定位，适用于宽高确定的场景，兼容IE9+，但不支持动态尺寸。</p>
calc() 实现水平居中：left + width 配合使用
直接用 left: calc(50% - 宽度的一半) 是最常用也最稳妥的方式，前提是元素有明确宽度。比如一个宽 200px 的盒子，就写 left: calc(50% - 100px)；如果是 rem 单位，比如宽 12rem，那就写 left: calc(50% - 6rem)。
常见错误是忘记减去自身一半宽度，只写 left: 50% —— 这会让元素左边缘到中心，整体偏右。也有人误写成 left: calc(50% - 200px)（没除以 2），结果偏移过大。
- 必须配合
position: absolute或fixed才生效 - 父容器需有定位上下文（比如
position: relative） - 百分比基于父容器宽度计算，不是视口宽度
calc() 实现垂直居中：top + height 配合使用
原理和水平方向一致：top: calc(50% - 高度的一半)。例如高 60px，就写 top: calc(50% - 30px)；若高为 4.5rem，则写 top: calc(50% - 2.25rem)。
注意：calc() 里不能混用不兼容单位，比如 calc(50% - 20px) 合法，但 calc(50% - 2em) 在某些旧版 Safari 中可能失效；更稳妥的做法是统一用 px 或全用相对单位。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 垂直居中同样依赖
position和父级定位上下文 - 如果高度是动态的（比如内容撑开），
calc()无法自动适配，此时应改用transform: translate(-50%, -50%) -
top和left要同时设置，缺一不可
calc() 水平+垂直居中组合写法
把上面两个逻辑合并即可：left: calc(50% - 宽度/2); top: calc(50% - 高度/2)。完整示例：
div {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 30px);
width: 200px;
height: 60px;
}这个写法在已知宽高的场景下非常可靠，兼容性好（IE9+ 支持 calc()），也不依赖 flex 或 grid。
- 不要省略
width和height声明，否则浏览器无法算出“一半”是多少 - 如果宽高含边框或 padding，要提前减去（比如
box-sizing: border-box下，宽度已包含 padding） - 避免在
calc()中写复杂嵌套表达式，如calc(50% - (200px / 2))，虽合法但可读性差，也无必要
为什么不用 calc() 居中？这些情况它不适用
当元素宽高不确定、内容动态变化、或需要响应式缩放时，calc() 就容易露馅。比如文字卡片高度随内容增长，你没法写死 top: calc(50% - Xpx)；又比如用 vw 设置宽度，但想按像素减半，calc(50% - 10vw) 语义混乱且结果不可控。
这时候更推荐用 transform 配合 left: 50%; top: 50%，或者直接上 display: flex + justify-content/align-items。
-
calc()是静态计算，不响应布局变化 - 移动端 viewport 缩放后，
%值会变，但px不会，混合使用易错位 - 调试时不容易直观看出偏移量是否正确，建议先用固定值测试，再换回 calc
实际用的时候，先确认宽高是否确定、是否需要响应式、父容器有没有定位上下文——这三个问题答完，基本就知道该不该用 calc()，以及怎么写才不会偏。
