如何将左对齐的Bootstrap 5轮播组件居中显示？

你的轮播左对齐的核心原因是：图片设置了w-75（宽度占父容器75%）但缺少居中样式，直接用Bootstrap自带的工具类就能快速解决，无需额外写自定义CSS：

方法一：给图片添加mx-auto类 #

mx-auto是Bootstrap内置的工具类，作用是给元素设置左右margin为auto，实现块级元素的水平居中。只需要给每个轮播图片的class追加mx-auto即可：

<div class="container-lg my-3">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">

    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="3"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="4"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="5"></li>
    </ol>
   
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/carousel/rt4.jpg" class="d-block w-75 mx-auto" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/carousel/rt2.jpg" class="d-block w-75 mx-auto" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/carousel/rt3.jpg" class="d-block w-75 mx-auto" alt="Slide 3">
        </div>
        <div class="carousel-item">
            <img src="images/carousel/rt1.jpg" class="d-block w-75 mx-auto" alt="Slide 4">
        </div>
        <div class="carousel-item">
            <img src="images/carousel/rt7.jpg" class="d-block w-75 mx-auto" alt="Slide 5">
        </div>
        <div class="carousel-item">
            <img src="images/carousel/rt8.jpg" class="d-block w-75 mx-auto" alt="Slide 6">
        </div>
    </div> <!-- Close carousel inner -->

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div> <!-- Close Carousel div -->
</div>

方法二：给carousel-item添加flex居中类 #

如果不想逐个修改图片，可以给每个carousel-item添加d-flex justify-content-center类，利用flex布局让内部所有元素自动居中：

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

两种方法都能实现轮播内容的居中效果，第一种更精准针对图片元素；如果轮播项内还有其他需要居中的内容，第二种方法会更高效，按需选择即可。

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