使用 `top: 50%; left: 50%` 对绝对定位元素仅将其左上角移至父容器中心，需配合 `transform: translate(-50%, -50%)` 才能真正实现水平垂直居中。
在 CSS 中，当一个元素设置为 position: absolute，其 top 和 left 值是相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的父级）计算的。你已为 .pinkfloyd 设置了 position: relative，因此 h2 的 top: 50%; left: 50% 理论上应相对于 .pinkfloyd 容器居中——但实际效果却是“偏右下”，这是因为：
✅ top: 50% 将 <h2> 元素的上边界移动到父容器垂直方向 50% 处；
✅ left: 50% 将 <h2> 元素的左边界移动到父容器水平方向 50% 处；
❌ 此时元素的中心点并未对齐，而是左上角落在中心，导致整体向右下方偏移。
✅ 正确解法：使用 transform 补偿偏移
只需添加一行 CSS 即可精准居中：
h2 {
font-size: 30px;
color: orangered;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：将自身回退自身宽高的一半 */
}- translate(-50%, -50%) 表示：沿 X 轴向左移动自身宽度的 50%，沿 Y 轴向上移动自身高度的 50%；
- 该变换基于元素自身的盒模型（content box），与父容器尺寸无关，兼容性好（现代浏览器及 IE9+）；
- 不影响文档流，也不改变 top/left 的计算逻辑，是目前最简洁可靠的居中方案。
⚠️ 注意事项
- 若 h2 内容动态变化（如多行文本、字体加载延迟），确保 transform 应用于最终渲染尺寸稳定的节点；
- 避免同时使用 margin: auto 或 text-align: center 混淆逻辑——absolute 元素不响应 margin: auto 的块级居中行为；
- 替代方案（如 inset: 0; margin: auto;）虽更语义化，但兼容性略低（需 Chrome 89+/Firefox 66+），不推荐用于基础项目。
✅ 总结
绝对定位元素的居中 ≠ 设置 top/left 为 50%。真正的居中 = 定位基准点 + 反向位移补偿。牢记 transform: translate(-50%, -50%) 这一黄金组合，即可在任意相对定位父容器内，稳定、精准、跨浏览器地实现绝对定位元素的水平垂直居中。
