本文详解如何使用 css 将文本块精确地水平且垂直居中于图片之上，重点解决 `position: absolute` 失效、文本错位等问题，并提供兼容性好、语义清晰的现代实现方案。

要实现在图片上完美居中文本（同时满足水平与垂直居中），关键在于建立正确的定位上下文并避免依赖不稳定的偏移值。原始代码中，#text-block 虽设为 absolute，但其父容器 #top-of-page 缺少 position: relative（CSS 中 absolute 元素是相对于最近的已定位祖先元素定位的），导致它实际脱离文档流后可能回退到

或视口定位，从而无法准确叠加在图片上。

✅ 正确做法是：

1. 为图片包裹一层独立的相对定位容器（如 .image），确保 absolute 子元素以此为参考系；
2. 使用 top: 50%; left: 50%; transform: translate(-50%, -50%) 实现真正居中——该组合不受元素自身宽高影响，比 margin: auto + 固定宽高更灵活可靠；
3. 添加 z-index 确保文字层位于图片上方。

以下是完整可运行示例：

  
    @@##@@
    
      
Title
    
  

#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 才生效，限制大）；
• 推荐给 添加 display: block，防止行内元素默认基线对齐导致的底部空隙；
• 若需响应式适配，可结合 max-width 或媒体查询优化不同屏幕下的字体大小与内边距。

此方法兼容所有现代浏览器（包括 IE10+），简洁、健壮、易于维护，是图片覆盖文字居中的推荐实践。