文字覆盖图片位置不准的核心解法是：设父容器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 结构示例：
<div class="img-wrap">
<img src="xxx.jpg" alt="">
<div class="caption">这是标题</div>
</div> - 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);
}
