如何在图片上居中显示文字（水平+垂直）

花韻仙語 2025-12-30 00:00:00 次阅读

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

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

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

✅ 正确做法是：

为图片包裹一层相对定位容器（如 .image），作为文字的定位上下文；
将文字容器设为绝对定位，并通过 top: 50%; left: 50% 将其左上角锚定到父容器中心；
用 transform: translate(-50%, -50%) 反向偏移自身宽高的一半，实现真正居中；
添加 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;
}