SwiperJS轮播组件无法居中求助（搭配Bootstrap使用）

问题描述 #

使用SwiperJS开发轮播组件并搭配Bootstrap框架，无论调整宽度、文本或容器居中样式，组件始终固定在屏幕左侧。

原代码如下：

HTML #

<div class="row text-center">
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="skillcard">
                    <img class="skillcardimg" src="https://cdn.glitch.global/123df645-7c49-4cd3-b292-825ade4e767b/skill1.png?v=1688747054870">
                    <div class="skillcardbody">
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="skillcard">
                    <img class="skillcardimg" src="https://cdn.glitch.global/123df645-7c49-4cd3-b292-825ade4e767b/skill1.png?v=1688747054870">
                    <div class="skillcardbody">
                    </div>
                </div>
            </div>
            <!-- 更多轮播项 -->
        </div>
    </div>
</div>

CSS #

.swiper2{
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 400px;
}

.skillcard{
  width: 100%;
  height: auto;
}

.skillcardbody{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

JS #

var swiper2 = new Swiper(".swiper2", {
    spaceBetween: 100,
    loop: true,
    autoplay: {
        delay: 2000,
        disableOnInteraction: false,
    },
});

问题原因 #

1. Bootstrap的row是flex布局，但.swiper2容器设置max-width:300px后，未配置水平居中的外边距，块级元素在flex容器中默认左对齐。
2. 未利用Bootstrap内置居中类，也未手动添加CSS居中样式，导致容器无法自动居中。

解决方案 #

方法一：使用Bootstrap内置类快速居中 #

直接给swiper容器添加Bootstrap的mx-auto类（水平方向自动外边距），无需修改CSS：

<div class="row text-center">
    <div class="swiper-container swiper2 mx-auto">
        <div class="swiper-wrapper">
            <!-- 轮播项内容 -->
        </div>
    </div>
</div>

方法二：通过CSS手动设置居中 #

如果不想依赖Bootstrap类，给.swiper2添加margin: 0 auto实现水平居中：

.swiper2{
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 400px;
  margin: 0 auto; /* 新增：水平居中 */
}

额外注意事项 #

• 检查是否有其他自定义CSS覆盖了.swiper2的margin或display属性（比如float: left），如有需移除。
• 当前Swiper初始化配置无对齐问题，无需修改JS代码。

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