文字覆盖图片位置不准的核心解法是：设父容器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%) 更可靠。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 推荐写法：
.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);
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
