本文详解如何使用 css 将文本块精确地水平且垂直居中于图片之上，重点解决 `position: absolute` 失效、文本错位等问题，并提供兼容性好、语义清晰的现代实现方案。
要实现在图片上完美居中文本（同时满足水平与垂直居中），关键在于建立正确的定位上下文并避免依赖不稳定的偏移值。原始代码中，#text-block 虽设为 absolute，但其父容器 #top-of-page 缺少 position: relative（CSS 中 absolute 元素是相对于最近的已定位祖先元素定位的），导致它实际脱离文档流后可能回退到 <body> 或视口定位，从而无法准确叠加在图片上。
✅ 正确做法是：
- 为图片包裹一层独立的相对定位容器（如 .image），确保 absolute 子元素以此为参考系；
- 使用 top: 50%; left: 50%; transform: translate(-50%, -50%) 实现真正居中——该组合不受元素自身宽高影响，比 margin: auto + 固定宽高更灵活可靠；
- 添加 z-index 确保文字层位于图片上方。
以下是完整可运行示例：
<div id="top-of-page">
<div class="image">
<img src="images/etudes.png" alt="背景图">
<div id="text-block">
<h1>Title</h1>
</div>
</div>
</div>#top-of-page {
margin: 10px;
}
.image {
position: relative;
display: inline-block; /* 避免宽度撑满父容器，适配图片原始尺寸 */
}
.image img {
display: block; /* 消除图片底部默认空白间隙 */
width: 100%;
height: auto;
}
#text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
}⚠️ 注意事项：
- 必须为 .image 设置 position: relative，否则 #text-block 的 absolute 定位将失去锚点；
- transform: translate(-50%, -50%) 是居中核心，不可省略或替换为 margin（因 margin: auto 在 absolute 元素上需同时指定 width/height 和 left/right/top/bottom 才生效，限制大）；
- 推荐给 <img> 添加 display: block，防止行内元素默认基线对齐导致的底部空隙；
- 若需响应式适配，可结合 max-width 或媒体查询优化不同屏幕下的字体大小与内边距。
此方法兼容所有现代浏览器（包括 IE10+），简洁、健壮、易于维护，是图片覆盖文字居中的推荐实践。
