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

想象一下#bg是我的身体，我想为每个幻灯片制作滑块（滑动滑块中心）。这个插件已经具备了高度的吸引力，但我只是不会让它以#bg为中心。垂直对齐（中心）滑块不起作用

我尝试垂直对齐伎俩像

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

，但它只是没有帮助。

2016-08-13 Maria Jane

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

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

查看更新的小提琴HERE。

请详细阅读柔性HERE

2016-08-13 09:03:58

为什么高度必须是600px的？假设它应该是动态的？ –

是的，你可以使它动态。我添加了600px以显示内部内容垂直居中的示例。 –

我发现了一个黑客，使用100vh，而不是600px –

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

.slider { 
text-align : center 
}

它会显示在上面的class中。

有关的jsfiddle演示，请点击here

2016-08-13 09:16:15

叹息请再次读这个问题 –

再次检查。 –

回答