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

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;
}

检查更新的小提琴HERE。

详细阅读flex HERE

Answer 2

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

.slider {
 text-align : center
}

它将显示在上面的中心。

对于jsfiddle演示，请点击here