How to vertically and horizontally center slick slider?

Question

I need my slick slider carousel to be completely centered in whatever browser someone is viewing it in. In other words, whether your viewing it in desktop chrome or an iPhone X Max the slider is positioned in the middle of the viewport. the slider is stuck to the top of the page.

I've tried every solution i could find but whatever i try the carosuel remains stuck to the top of the page.

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

Here is the code you can use to center your slider horizontally and vertically. As there are some issues in adding external libraries in the code snippet, I have created a codepen for you. You can refer to this 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> 

EDIT NOTE: Please check the codepen link instead of snippet result for the final result.