如果使用 calc() 实现 HTML 元素水平垂直居中，通常需要同时设置 left: calc(50% - 宽度/2) 和 top: calc(50% - 高度/2)。这种写法依赖 position: absolute，同时父元素也要先设置 relative 定位，更适合元素宽高已知的布局场景。它兼容 IE9+，但对于动态尺寸内容并不够友好。
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，或者统一使用相对单位。
- 垂直居中同样依赖
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;
}这种用 calc() 计算公式实现 HTML 元素居中的写法，在宽高已知的场景下非常稳定，兼容性也不错（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() 做居中，以及具体该怎么写才不会出现偏移。
