本文详解如何使用 css 的绝对定位与 transform 技巧，将文字块精准水平垂直居中于图片之上，解决常见布局偏移问题，并提供可直接复用的健壮代码方案。

要实现在图片上完美居中文字（同时满足水平和垂直居中），关键在于建立正确的定位上下文并避免依赖 margin: 0 auto（对绝对定位无效）或固定 top/left 值。原代码中 #text-block 虽设为 position: absolute，但其父容器 #top-of-page 缺少 position: relative，导致绝对定位参照的是文档流根元素（如

），而非图片容器，因此文字无法随图定位；此外，margin: 0 auto 对绝对定位元素无水平居中效果。

✅ 正确做法是：

1. 为图片包裹一层相对定位容器（如 .image），作为文字的定位上下文；
2. 将文字容器设为绝对定位，并通过 top: 50%; left: 50% 将其左上角锚定到父容器中心；
3. 用 transform: translate(-50%, -50%) 反向偏移自身宽高的一半，实现真正居中；
4. 添加 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; /* 确保内部文本也居中 */
  margin: 0; /* 清除 h1 默认外边距 */
}

#text-block h1 {
  margin: 0;
  font-size: 1.8rem;
}

⚠️ 注意事项：

• 不要遗漏 .image { position: relative } —— 这是绝对定位生效的前提；
• transform: translate(-50%, -50%) 是现代居中核心，兼容性良好（IE10+），比传统负 margin 更可靠；
• 使用 display: inline-block 或 max-width 控制 .image 容器尺寸，防止图片被强制拉伸；
• 若需响应式支持，可结合 @media 查询调整 padding 或 font-size；
• 始终为 添加 alt 属性以保障可访问性。

此方法结构清晰、语义合理、浏览器兼容性强，是现代前端实现“图文叠加居中”的推荐实践。