如何在页面中间垂直和水平居中滑块 - CSS、HTML

Question

I have a Swiper slider which I would like to center in the middle of the page without using absolute positioning.

I have tried this:

 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>

Added CSS class

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

I have also tried with margin

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

And also

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

But nothing sees to work. I have spent quite a lot time on it and I am not sure what am I missing.

Any tip would be highly appreciated!

Answer 1

Set the view height of the container:

 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>