文字覆盖图片位置不准的核心解法是：设父容器position: relative作为定位上下文，文字用absolute配合transform: translate(-50%,-50%)居中；单行固定高可用line-height匹配图片高度，响应式优先用transform而非百分比top。

文字覆盖在图片上位置不准，通常是因为 absolute 定位没配合好容器的尺寸基准或行高逻辑。单纯用 top/left 硬调数值容易随字体、缩放、设备变化而偏移。核心思路是：让图片容器成为定位上下文，再用 line-height 配合 vertical-align 或 transform 实现垂直居中，比纯像素微调更稳定。

确保父容器设为 relative

图片和文字需包裹在一个共同父容器内，且该容器必须设置 position: relative。否则 absolute 文字会相对于最近的已定位祖先（可能是 body）偏移，导致位置失控。

• HTML 结构示例：
  
    
    这是标题
  
• CSS 必须写：
  .img-wrap { position: relative; display: inline-block; }
  .caption { position: absolute; top: 0; left: 0; }

用 line-height 控制单行文字垂直居中

当文字只有一行、且高度固定时，line-height 是最轻量的垂直对齐方式。将它的值设为与图片高度一致（或容器高度），再配合 text-align: center 和 top: 50% + transform: translateY(-50%) 更可靠。

• 推荐写法：
  .caption {
    line-height: 200px; /* 和图片高度一致 */
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
• 若图片高度不固定，改用：
  .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }（此时 line-height 可省略）

注意 font-size 和 line-height 的继承关系

line-height 若设为无单位数值（如 1.5），会继承父元素字号并计算，容易因外部样式干扰失准。建议显式写带单位的值（如 48px），或用 em 相对于当前元素自身字号。

立即学习“前端免费学习笔记（深入）”；

• 安全写法：
  .caption {
    font-size: 18px;
    line-height: 2.67; /* 48px ÷ 18px = 2.67，保持比例 */
  }
• 避免：
  .caption { line-height: 48px; font-size: 20px; } /* 行高固定但字号变大 → 溢出 */

响应式场景下优先用 transform 而非 top/left 百分比

百分比 top 基于父容器高度，但图片可能被 max-width: 100% 缩放，导致容器高度≠图片原始高度，造成错位。用 transform: translate(-50%, -50%) 始终基于自身宽高计算，更鲁棒。

• 适配移动端示例：
  @media (max-width: 768px) {
    .caption {
      font-size: 14px;
      line-height: 1.43; /* 20px ÷ 14px */
    }
  }
• 更推荐统一用：
  .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(14px, 4vw, 18px);
  }