Maria Jane Maria Jane - 3 months ago 22
CSS Question

vertical align (center center) a slider doesn't work

Imagine #bg is my body, and I want to make the slider (slick slider center center) for every slides. The plugin already has advaptive height but I just coulnd't make it center center on #bg.

http://fiddle.jshell.net/obd45c4r/

I tried vertical align trick like

.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}


but it just doesn't help.

Answer

Use flex to center the content vertically. like this

#bg{
   background:blue;
   width:100%;
   height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
}

Check updated fiddle HERE.

Read flex in detail HERE