垂直對齊（中心）滑塊不起作用

想象一下#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

嘆息請再次讀這個問題 –

再次檢查。 –

回答