关键在于将文字容器设为图片父元素的绝对定位子元素，并以该父元素（需设position: relative）为定位上下文，用top: 50%; left: 50%; transform: translate(-50%, -50%)锚定中心，同时字号须响应式（如clamp或vw），并确保容器有高度占位。
响应式图片上叠加标题文字并保持垂直居中，关键不是“让文字居中”，而是让文字容器的定位基准始终锚定在图片自身尺寸内——否则窗口缩放时必然偏移。
为什么 text-align: center + line-height 在图片上失效
这个组合只对纯文本容器有效，而图片是替换元素，line-height 对它不产生行框作用；把文字和图片塞进同一个 <p> 或 <div> 后加 text-align: center，只能水平居中文字，对图片本身无影响，更无法控制文字相对于图片的垂直位置。
- 文字会按父容器高度居中，但图片可能撑高容器，导致文字实际离图片顶部很远
- 响应式图片（
max-width: 100%; height: auto）高度动态变化，line-height固定值立刻失准 - 若图片用
<img>单独存在，它默认是 inline 元素，底部有基线留白，line-height会把它往下压
用 position: absolute + transform 锚定图片内部中心
这是目前唯一能真正绑定文字到图片尺寸、且兼容 IE9+ 的方案。前提是图片容器必须成为定位上下文。
- 给包裹
<img>的父元素（比如<div class="img-wrapper">）设position: relative - 标题文字用
<div class="title">文字</div>作为该父元素的子元素，并设position: absolute - 写死
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 这三句缺一不可 - 避免把文字放在
<img>标签内部（如<img><span>文字</span>），HTML 不允许这样嵌套
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="img-wrapper" style="position: relative; display: inline-block;"> <img src="photo.jpg" alt="描述" style="max-width: 100%; height: auto;"> <div class="title" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);>标题文字</div> </div>
用 display: flex 居中但需注意容器高度行为
如果图片和文字是并列兄弟关系（非叠加），想让它们整体在页面中居中，flex 更简洁；但若目标是“文字浮在图片正中央”，flex 就得换结构：把图片和文字一起包进一个容器，再对该容器做绝对定位或 flex 居中。
- 直接对
<img>设display: flex无效 ——<img>是替换元素，不能当 flex 容器 - 常见错误：给图片父容器设
display: flex; align-items: center，却忘了它没设置高度，align-items没参照系 - 若用 flex 实现图文叠加，推荐结构：
<div class="overlay-container"><img><div class="title"></div></div>，然后对.overlay-container设position: relative和display: flex，再用justify-content/align-items控制.title—— 本质还是回归到定位流
响应式缩放时文字大小也要自适应，否则会溢出或过小
仅靠定位居中不够，文字字号必须随图片缩放同步调整，否则大屏下字太小、小屏下字溢出。
- 避免固定
font-size: 16px，改用视口单位：font-size: clamp(1rem, 4vw, 2.5rem) - 若用 rem，确保根字体大小随屏幕变化（例如通过
html { font-size: calc(16px + 0.25vw); }） - 文字容器加
max-width: 80%和word-break: break-word，防长标题在窄屏折行错位 - 慎用
transform: scale()调整文字大小 —— 它会放大整个渲染盒，包括边距和阴影，且影响可访问性
最易被忽略的一点：图片加载完成前，height: auto 可能导致容器高度为 0，文字直接堆在页面顶部。加 min-height 或使用 aspect-ratio（现代浏览器）锁定宽高比，能提前占位。
