图片容器需设position: relative，文字层用absolute+50%偏移+transform(-50%,-50%)居中；避免直接给img设绝对定位，须用div包裹并控制z-index、背景、阴影提升可读性。
图片容器需要设置相对定位
绝对定位的标题文字要盖在图片上，图片父容器必须是 position: relative，否则 position: absolute 会相对于 body 或最近的定位祖先定位，导致偏移不可控。常见错误是直接给 <img> 加绝对定位——<img> 是替换元素，无法承载子元素，文字必须放在容器里。
- 用
<div class="image-container"> 包裹 <code><img>和文字标签（如<h3></h3>） - 给
.image-container加position: relative和display: inline-block（保持宽高随图自适应） - 避免用
.row或.container这类带 padding/margin 的 Bootstrap 布局类直接当图片容器，容易干扰居中计算 - 文字标签（如
<h3 class="overlay-title"></h3>）需设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 别用
margin-top: -XXpx手动回拉——图片尺寸不固定时失效 - 如果文字需要响应式缩放，可结合
vw单位或clamp()，但注意transform不影响布局流，安全 - 给文字加背景半透层：
background: rgba(0,0,0,0.6)+padding: 0.5rem 1rem，避免贴边难读 - 显式声明
z-index: 2（图片默认为 0，容器为 1），防止被其他组件（如 navbar）覆盖 - 用
text-white类不够——深色图上白字可读，浅色图上就得动态切色，建议加text-shadow: 0 1px 2px rgba(0,0,0,0.8)提升鲁棒性 -
class="d-flex justify-content-center align-items-center"对容器无效——它只对 flex 子项起作用，而绝对定位元素已脱离 flex 流，所以不能替代transform居中 - 可用
text-center配合position-absolute（Bootstrap 5.3+ 内置）简化写法，但依然要补top: 50%和transform - 响应式断点慎用：
class="d-none d-md-block"会隐藏文字，但若想“小屏文字下移”，得额外写媒体查询，不能只靠显示/隐藏
文字层用绝对定位 + 50%偏移 + transform
只靠 top: 50%; left: 50% 会让文字左上角落在中心点，看起来偏右下。必须配合 transform: translate(-50%, -50%) 回拉自身宽高的一半。Bootstrap 本身不提供这个组合，得手写 CSS。
确保文字在图片上方且可读
z-index 只对定位元素生效，但即使设了 z-index: 1，如果图片加载慢或有透明背景，文字仍可能被遮挡或看不清。得兼顾层叠和视觉对比。
用 Bootstrap 工具类快速收边
纯手写 CSS 能控细节，但日常开发中可借 Bootstrap 的间距、颜色、响应式工具提速，前提是理解它们如何与定位共存。
img-fluid 后容器宽高比不固定，top: 50% 仍按容器高度算，但人眼感知的是图片内容中心。真要严苛对齐，得用 object-fit + background-image 方案，而不是 <img> 标签。
