轮播图文字默认不居中，因.carousel-caption为绝对定位且top:20%、left/right:15%，需用top:50%;left:50%;transform:translate(-50%,-50%)实现真正居中。
轮播图文字默认不居中？检查 .carousel-caption 的定位和内边距
bootstrap 轮播图（carousel）里的文字默认使用 .carousel-caption 包裹，它本身是绝对定位（position: absolute），且顶部偏移固定为 top: 20%，左右留白为 left: 15% 和 right: 15%。这意味着它**不会自动水平或垂直居中**，尤其在响应式场景下容易偏移。
要真正居中，得覆盖默认样式。最直接的方式是重置 top/left/right/bottom，并用 transform 配合 50% 偏移：
.carousel-caption {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0;
}
注意：必须保留 position: absolute（Bootstrap 已设），否则 top/left 无效；transform 是关键，仅靠 text-align: center 只能居中文字内容，不能让整个 .carousel-caption 容器居中。
为什么加了 text-align: center 还是不居中？
常见误区是只加 text-align: center，但这个 CSS 属性只影响行内内容（如文字、inline 元素）的水平对齐，对块级容器自身位置毫无影响。而 .carousel-caption 默认是 width: 70% 的块级盒子，左偏移 15%，所以即使文字居中，整个盒子仍在画面左侧。
- 务必同时控制容器定位（
top/left+transform） - 如果轮播图高度变化大（比如移动端图片变矮），
top: 50%可能导致文字被截断，此时可改用bottom: 2rem等更稳健的锚点 - 避免给
.carousel-caption设固定width，否则在小屏下会溢出或撑开容器
Bootstrap 5 和 Bootstrap 4 的差异点在哪？
两者默认样式几乎一致，但 Bootstrap 5 移除了 jQuery 依赖，纯 JS 控制轮播逻辑——这不影响样式，但如果你用的是旧版自定义 JS 操作 slide 事件，要注意事件名变更：slid.bs.carousel（BS5） vs slid.bs.carousel（BS4 同名，但触发时机微调）。样式层面只需关注 CSS。
另外，Bootstrap 5 的 .carousel-caption 默认 color 是 var(--bs-body-color)，而 BS4 是硬编码 #fff。如果背景图较亮，文字可能看不清，需手动设 color 或加半透背景：
.carousel-caption {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
}
移动端文字被裁切或错位？优先检查父容器高度和 overflow
轮播图容器（.carousel 或 .carousel-inner）如果没设最小高度，或子项（.carousel-item）图片加载失败/未指定尺寸，会导致容器高度塌陷，top: 50% 就失去参照，文字飞到顶部外。
- 确保每个
.carousel-item img有height或min-height，例如min-height: 40vh - 检查
.carousel是否被其他 CSS 设置了overflow: hidden且高度不足——这时文字即使定位正确也会被剪掉 - 在媒体查询中单独重置移动端的
transform，比如@media (max-width: 576px) { .carousel-caption { transform: translate(-50%, -40%); } }，避免因字体缩放导致偏移过头
真正麻烦的不是怎么写居中代码，而是轮播图高度不稳定时，50% 这个参照值随时在变——所以先稳住容器高度，再谈居中。
