垂直中心不能正常工作

Question

從開始我搜索長時間的解決方案和類似的問題在stackoverflow，但沒有人適合我。

這裏是一個的jsfiddle：http://jsfiddle.net/ruudy/MJe3H/

我想verticaly中心材料，容器，它只能horizo​​ntaly。

我嘗試了不同的解決方案，如：

top: 0px; 
bottom: 0px; 
margin: auto; 

---

display: -moz-box; 
-moz-box-align: center; 
display: -webkit-box; 
-webkit-box-align: center; 
display: box; 
box-align: center; 

---

display: table-cell; 
vertical-align: center; 

我嘗試看看是否父DIV使垂直中心無法正常工作，但不找到任何線索。

在此先感謝。

PD：必須是一件簡單的事情，但我沒有找到它。

Answer 1

看看這個網站上的垂直中心物體，它對我來說非常有用。

vertical-centering-with-css

Answer 2

只有在具有已知高度的容器與CSS技巧對齊時，才能對齊容器。

將容器絕對位置設置爲50％的頂部位置，然後在容器中添加一半尺寸的負邊距。

.parent_container { 
    position: relative; 
} 

.container { 
    height: 500px; 
    position: absolute; 
    top: 50%; 
    margin-top: -250px; 
} 

Answer 3

嘗試使用css-tables技術來垂直居中。

看到這個LIVE DEMO

更多關於this post的不同的技術。