推荐用transform实现绝对定位元素水平垂直居中：设position: absolute、top: 50%、left: 50%，再用transform: translate(-50%, -50%)反向偏移，无需知道宽高，兼容IE9+。
绝对定位元素水平垂直居中，核心是利用 top/left 定位 + transform 位移，这是最推荐、兼容性好且无需知道宽高的方法。
用 transform 实现居中（推荐）
给元素设置 position: absolute，再配合 top: 50% 和 left: 50% 将其左上角移到父容器中心，最后用 transform: translate(-50%, -50%) 向左上反向偏移自身宽高的一半。
示例代码：
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 适用于任意宽高（包括未知或动态尺寸）的元素
- 现代浏览器全覆盖，IE9+ 支持
- 无需设置
margin或预先知道尺寸
用 margin 负值居中（需已知宽高）
当元素宽高固定时，可设 top: 50%、left: 50%，再通过负 margin 抵消自身一半尺寸。
立即学习“前端免费学习笔记（深入）”；
例如宽 200px、高 100px 的元素：
.centered-fixed {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* 高度一半 */
margin-left: -100px; /* 宽度一半 */
}
- 兼容性极好（IE6+ 都支持）
- 但必须提前知道精确宽高，不适合响应式或内容不定的场景
- 容易因单位换算出错（如 rem/em 情况下需格外注意）
配合 calc() 的灵活写法（进阶）
如果想避免 transform 或 margin，也可用 calc() 直接计算偏移位置，例如：
.centered-calc {
position: absolute;
top: calc(50% - 50px); /* 假设高 100px */
left: calc(50% - 100px); /* 假设宽 200px */
}
- 语义清晰，逻辑直白
- 仍依赖已知尺寸，且 IE9 不支持 calc()（IE10+ 支持）
- 适合需要规避 transform（如某些动画性能敏感场景）的情况
注意父容器的定位上下文
绝对定位元素的“居中”是相对于最近的 已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky）。若没有这样的祖先，默认相对于 <html>。
- 通常需给父容器加
position: relative来建立定位上下文 - 否则元素可能脱离预期区域，甚至撑破视口
- 不要遗漏这一步，否则居中会失效
