垂直对齐（中心）滑块不起作用

Question

想象一下#bg是我的身体，我想为每张幻灯片制作滑块（光滑的滑块中心）。 该插件已经具有良好的高度，但我只是不能将它作为#bg的中心。

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

我尝试了垂直对齐技巧

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

但它没有帮助。

Answer 1

使用flex将内容垂直居中。 像这样

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

检查更新的小提琴在这里 。

在这里详细阅读flex

Answer 2

请更改CSS中的滑块类。 添加以下。

.slider {
 text-align : center
}

它将显示在上面的类中心。

有关jsfiddle演示，请单击此处