如何在页面中间垂直和水平居中滑动条-CSS，HTML

Question

我有一个Swiper滑块，我想在页面中间居中，而无需使用绝对定位。

我已经尝试过了：

var swiper = new Swiper('.swiper-container.about', {
  effect: 'coverflow',
  initialSlide: 1,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 800,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: '.swiper-pagination',
  }
});

.swiper-slide.about {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 400px !important;
  background-color: rgb(216, 155, 0);
  border-radius: 6px;
}

.swiper-container.about .swiper-wrapper {
  height: auto !important;
}

.swiper-container.about {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.swiper-slide .imgBx {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.swiper-slide .imgBx img {
  width: 100%;
}

.title-center.about {
    width: 220px;
    margin: 0 auto;
    padding-top:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<section id="about">

  <div class="container">
    <div class="title-center about">
      <h1>About</h1>
    </div>
    <div class="swiper-container about">
      <div class="swiper-wrapper">
        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>
  </div>

添加了CSS类

.swiper-container.about {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }

我也尝试过使用margin

.swiper-container.about {
   margin-left: auto !important;
   margin-right: auto !important;
   width:80%;
} 

还有

.swiper-container.about {
   display: inline-block;
   vertical-align: middle;
 }

但是没有任何效果。我已经花了很多时间，但我不确定我想念的是什么。

任何提示将不胜感激！

Answer 1

设置容器的视图高度：

var swiper = new Swiper('.swiper-container.about', {
  effect: 'coverflow',
  initialSlide: 1,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 800,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: '.swiper-pagination',
  }
});

.swiper-slide.about {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 400px !important;
  background-color: rgb(216, 155, 0);
  border-radius: 6px;
}

.swiper-container.about .swiper-wrapper {
  height: auto !important;
}

.swiper-container.about {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.swiper-slide .imgBx {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.swiper-slide .imgBx img {
  width: 100%;
}

.title-center.about {
    width: 220px;
    margin: 0 auto;
    padding-top:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<section id="about">

  <div class="container" style="height:90vh">
    <div class="title-center about">
      <h1>About</h1>
    </div>
    <div class="swiper-container about">
      <div class="swiper-wrapper">
        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

        <div class="swiper-slide about">
          <div class="imgBx">
          </div>
        </div>

      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

    </div>
  </div>