div上的垂直中心不起作用

Question

從一開始，我就尋找長期解決方案和關於stackoverflow的類似問題，但是沒有人適合我。

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

我想將材料容器垂直居中，但只能水平放置。

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

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

只有當容器具有CSS技巧的已知高度時，您才能將容器垂直對齊。

將容器的絕對值設置為最高位置50％，然后從容器中添加一半大小的負邊距。

.parent_container {
    position: relative;
}

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

Answer 2

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

觀看此現場演示

更多有關本文中不同技術的信息 。

Answer 3

看看這個垂直中心對象的站點，對我來說非常有用。

CSS垂直居中