如何实现Bootstrap carousel轮播幻灯片内部内容的水平居中

解决方案 #

你当前代码的问题在于给.carousel-inner添加了d-flex系列布局类，Bootstrap原生.carousel-inner依赖默认的定位规则控制轮播项切换，额外添加flex布局会破坏原生逻辑，导致对齐失效。

可以直接通过Bootstrap内置工具类实现需求，无需额外自定义CSS，修改后的代码如下：

<div class="container-fluid main vh-100 p-0">
  <div id="slideshowCarousel" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="false" data-bs-wrap="false">
    <div class="carousel-inner h-100">
        <!-- 轮播项1 -->
        <div class="carousel-item active h-100 d-flex justify-content-center align-items-center">
          <div>
            <!-- 此处放你的幻灯片内容：图片、表格、文本均可 -->
            <h3>幻灯片1内容</h3>
            <p>测试水平居中效果</p>
          </div>
        </div>
        <!-- 轮播项2 -->
        <div class="carousel-item h-100 d-flex justify-content-center align-items-center">
          <div>
            <table class="table table-bordered w-auto">
              <tr><td>测试表格</td><td>自动水平居中</td></tr>
              <tr><td>幻灯片2内容</td><td>对齐正常</td></tr>
            </table>
          </div>
        </div>
    </div>
    <!-- 可选添加轮播控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#slideshowCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#slideshowCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button>
  </div>
</div>

核心逻辑说明 #

• 把原来加在.carousel-inner上的布局类转移到每个.carousel-item上，不破坏轮播原生切换逻辑
• justify-content-center为控制内容水平居中的核心类，若不需要垂直居中可删除align-items-center
• 最外层容器添加vh-100撑满整个视口高度，p-0移除默认内边距避免出现横向/纵向滚动条
• 所有轮播项统一添加h-100继承父级高度，保证flex布局正常生效

如果你的内容以行内文本、行内图片为主，也可以额外给.carousel-item加text-center类辅助行内内容居中。

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