应使用 .card-img-top + .card-body 配合 position-relative 和绝对定位实现文字叠加，而非硬加 position: absolute；需添加 viewport 元标签、transform 居中及 z-index 确保响应式与层级正确。
卡片里图片上直接叠文字，别用 position: absolute 硬来
bootstrap 的 .card 本身不提供“图片+文字叠加”的内置结构，硬加 position: absolute 容易脱离文档流、在小屏错位、与 .card-body 内容重叠。正确路径是：把图片当背景，或用 .card-img-top + .card-body 配合定位容器。
用 .card-img-top + .card-body 实现可控叠加
这是最稳妥、语义清晰、响应式友好的方式。关键在于让 .card-body 覆盖在图片上方，而不是追加新层。
- 确保
.card是相对定位容器：<div class="card position-relative"> <li>图片用 <code><img src="..." class="card-img-top">，它会自动撑高卡片 -
.card-body默认是块级元素，加position: absolute; top: 0; left: 0; width: 100%; height: 100%;就能覆盖全图 - 文字用
.card-title和.card-text，再配合text-white bg-dark bg-opacity-50 p-3做半透明底衬，提升可读性 - 必须有：
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 会虚拟缩放，破坏绝对定位计算 - 如果卡片高度由图片决定，就别给
.card设固定height；若需统一高度，用min-height替代height -
.card-body绝对定位后，记得加z-index: 1，避免被其他元素（如边框、阴影）遮挡 - 给文字容器（比如一个
<div class="card-content">）加：<code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 不要写
margin-top: -XXpx，因为字体大小、行高在不同设备可能变化，像素值会失效 - 如果文字内容动态加载，这个方案依然稳定；而基于 flex 或 grid 的居中在
.card-img-top场景下反而更难控制层级
文字叠加效果是否生效，80% 取决于有没有给卡片加
移动端文字被裁切？检查 overflow 和视口设置
常见错误现象：桌面看着好好的，手机一打开，文字一半消失——不是 CSS 没生效，而是卡片父容器（比如 .col-md-4）没设好高度，或忘了加 viewport 元标签。
想让文字垂直水平居中？用 transform: translate(-50%, -50%)，别靠 margin
绝对定位下，top: 50%; left: 50% 只是把元素左上角移到中心，真正居中得靠 transform。这是 CSS 居中通用解法，和 Bootstrap 版本无关。
position-relative，剩下 20% 在 viewport 和 transform 的组合使用上——漏掉任一环，都会在某个机型上突然失灵。
