I'm struggling to get my slick slider carousel perfectly centered in any browser, whether it's on desktop Chrome or an iPhone X Max. The slider is currently stuck at the top of the page and I've tried multiple solutions without success.
This was the first method I attempted: https://github.com/kenwheeler/slick/issues/281
I tinkered with the code in both slick.css and slick-theme.css but couldn't solve the issue.
.slick-slide.c {
display: inline-block;
vertical-align: middle;
float:none;
}
Here's a snippet from 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 hope for the slider to be both vertically and horizontally centered within its viewport.