如何垂直和水平中心光滑滑块？

Question

我需要将光滑的滑动旋转木马完全置于有人正在查看的浏览器的中心位置。换句话说，无论是在桌面镶边还是iPhone X Max中查看它，滑块都位于视口的中间。 滑块粘贴在页面顶部。

我已经尝试了我能找到的所有解决方案，但无论我尝试什么，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

以下是可用于水平和垂直居中滑块的代码。 由于在代码片段中添加外部库存在一些问题，因此我为您创建了一个codepen。 你可以参考这个链接 ：

 $('.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链接而不是最终结果的片段结果。