使用 `top: 50%; left: 50%` 配合 `position: absolute` 只会将元素左上角锚点移至父容器中心，而非整体居中；需配合 `transform: translate(-50%, -50%)` 才能真正实现水平垂直居中。
在 CSS 布局中，对绝对定位（position: absolute）元素使用 top: 50%; left: 50% 是一个常见但易被误解的居中写法。它的本质是将该元素自身的左上角（即盒模型的 border-box 原点）精确放置在最近的已定位祖先元素（即 position: relative/absolute/fixed/sticky 的父容器）的中心点上。因此，元素并不会“视觉居中”，而是左上角落在中心——导致整体偏右下。
要真正实现水平垂直居中，必须额外补偿元素自身尺寸带来的偏移。现代、简洁且兼容性良好的方案是借助 transform：
.pinkfloyd {
display: inline-block;
position: relative; /* 确保成为 h2 的定位上下文 */
}
.pinkfloyd h2 {
font-size: 30px;
color: orangered;
position: absolute;
top: 50%;
left: 50%;
/* 关键修正：向左、向上平移自身宽高的一半 */
transform: translate(-50%, -50%);
}✅ 此写法优势明显：
⚠️ 注意事项：
- 父容器 .pinkfloyd 必须声明 position: relative（或其他非 static 值），否则 h2 将相对于视口或更高层定位上下文定位；
- 若 h2 内容含换行、行高较大或有 margin/padding，居中仍以整个盒模型为基准，transform 依然准确；
- 避免混用 margin: auto 与 top/left —— 绝对定位下 margin: auto 在块级上下文中仅对 left/right 有效（需同时设 width），且不适用于垂直方向。
? 进阶提示：若需兼容 IE8 及以下（极少数场景），可改用 margin 方案（需固定宽高）：
h2 {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 40px;
margin: -20px 0 0 -60px; /* 负 margin = -height/2, -width/2 */
}总之，top: 50%; left: 50%; transform: translate(-50%, -50%) 是居中绝对定位元素的黄金组合，简洁、健壮、语义清晰，应作为首选方案。
