javascript - 如何垂直和水平居中滑动 slider ？

Question

我需要我光滑的 slider 旋转木马在任何浏览器中完全居中。换句话说，无论您是在桌面 chrome 还是 iPhone X Max 中查看它， slider 都位于视口(viewport)的中间。 slider 卡在页面顶部。

我已经尝试了我能找到的所有解决方案，但无论我尝试什么，carosuel 仍然停留在页面顶部。

this is the first method i tried https://github.com/kenwheeler/slick/issues/281
I tried to fiddle with what i found in both slick.css and slick-theme.css and still couldnt figure it out.

.slick-slide.c {
    display: inline-block;
    vertical-align: middle;
    float:none;
}

 My current style.css 

#wrapper{
  width: 100%;
  margin: auto;
  height: 100%;
  background: grey;
  }

html, body {
  height: 100%;
  margin: 0
}
body.Site{
  text-align: center;
  width: 100%;
  outline: 0;
  min-height: 100%;
  background: blue;

}
main.Site-content{


}
footer {

  height: 120px;
  background: red;

}

.barcode{
font-family: 'Libre Barcode 39', cursive;
font-size: 2vw;
}



.slider {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 17px;
  background: green;

}

.player {
  width: 80%;
  text-align: center;
  background: purple;
  outline: 0;
}


I expect my slider to remain centered vertically and horizontally within its viewport.

Answer 1

这是您可以用来使 slider 水平和垂直居中的代码。由于在代码片段中添加外部库存在一些问题，因此我为您创建了一个代码笔。可以引用这个link :

 
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

body{
  background:#ccc;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="main">
  
  <div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>
</div>

编辑注意:请检查 codepen 链接而不是代码片段结果以获得最终结果。