如何调整Bootstrap Carousel轮播尺寸并将自定义大小图片居中显示

你可以通过以下两种方式实现居中需求，优先使用Bootstrap自带工具类，无需额外编写自定义CSS：

方案1：使用Bootstrap内置工具类（推荐） #

你只需要给设置了50%宽度的carousel-inner添加mx-auto类（Bootstrap内置的水平自动边距类，实现水平居中）即可，如果你的图片尺寸小于carousel-item的宽度，还可以给img标签也加mx-auto类实现图片在轮播项内居中。
修改后的代码如下：

<!-- 给carousel-inner加mx-auto类实现整个轮播容器居中 -->
<div class="carousel-inner mx-auto" style="width: 50%;">
    <div class="carousel-item active">
        <!-- 不需要拉伸图片可删除w-100，加mx-auto实现图片在项内居中 -->
        <img src="img/post1.jpg" class="d-block w-100 mx-auto" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
        </div>
    </div>
</div>

注意：原代码中img的src属性多写了一个引号，且路径用了反斜杠，建议修改为正斜杠避免web环境下路径识别异常。

方案2：自定义CSS实现 #

如果你不想用工具类，也可以给对应元素添加自定义样式：

• 给carousel-inner添加样式：margin: 0 auto;
• 给轮播内的img添加样式：display: block; margin: 0 auto;

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