Bootstrap 5：如何设置轮播图标题（carousel-caption）居中显示

问题描述 #

我使用Bootstrap 5搭建了带标题的轮播图（carousel），希望将轮播图标题（carousel-caption）置于幻灯片中央。请问能否通过为包含carousel-item的div或carousel-caption添加类实现该效果？还是仍需沿用旧版本的CSS方案？我尝试了align-middle等类但未成功。旧方案示例：

.carousel-caption {
    top: 0;
    bottom: auto;
}

可行方案 #

在Bootstrap 5里，不用硬套旧方案，有两种更合适的实现方式：

1. 用Bootstrap内置工具类搞定 #

直接给carousel-caption加几个内置工具类，无需自定义CSS：

• d-flex：将标题容器转为弹性布局
• h-100：让标题容器高度铺满父级carousel-item
• align-items-center：垂直方向居中内容
• justify-content-center：水平方向居中内容
• flex-column：保持标题、描述的垂直排版（可选，若需要上下排列内容则加）

示例代码：

<div class="carousel-caption d-flex h-100 align-items-center justify-content-center flex-column">
  <h5>示例轮播标题</h5>
  <p>这里是轮播图的描述文本</p>
</div>

2. 极简自定义CSS #

如果觉得工具类太多，也可以写精简的自定义CSS，比旧方案的居中效果更精准：

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}

这个方法通过transform: translateY(-50%)抵消top:50%带来的偏移，实现真正的垂直居中，适配不同高度的幻灯片。

补充说明 #

你之前尝试的align-middle之所以没用，是因为这个类针对的是行内元素或表格布局场景，而carousel-caption默认是绝对定位，所以该类无法生效。

内容的提问来源于stack exchange，提问作者User981636