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技术垂直居中。

请参阅此LIVE DEMO

有关this post中不同技巧的更多信息。

Answer 3

在垂直中心物体上查看此网站，对我来说非常有用。

vertical-centering-with-css