如何在Bootstrap 5 Carousel轮播组件中居中显示内部图片

问题表现 #

复现代码如下（基于Bootstrap 5.1官方带指示器轮播示例修改，给图片加了w-25类缩小宽度）：

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../images/1.jpg" class="w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/2.jpg" class="w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/3.jpg" class="w-25" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

问题原因 #

.carousel-item默认没有内置居中布局规则，被缩小宽度的图片作为行内块元素会默认靠左排列，无法自动在轮播项内居中。

修复方案 #

直接使用Bootstrap 5自带的flex工具类即可，不需要编写额外自定义CSS：

• 水平居中（适配绝大多数场景）：给每一个.carousel-item元素添加d-flex justify-content-center类，将轮播项转为弹性容器并设置主轴居中，图片会自动水平居中。
  修改后的轮播项示例：

  <div class="carousel-item active d-flex justify-content-center">
      <img src="../images/1.jpg" class="w-25" alt="...">
  </div>
  

  其余轮播项按相同规则添加类名即可。
• 水平+垂直居中（适配设置了固定高度的轮播场景）：给.carousel-item添加的类组合为d-flex justify-content-center align-items-center，图片会在轮播项区域内双向居中。

注意：如果图片尺寸不一致，建议额外给图片加object-fit: contain样式避免拉伸变形，可直接用Bootstrap自带的object-fit-contain工具类实现。

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