html - 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：一定很简单，但我找不到。

score 1 · Accepted Answer

Have a look at this site on vertical center objects, it has been very useful for me.

score 1 · Accepted Answer

只有当容器具有已知的高度时，您才能使用 CSS 技巧垂直对齐容器。

将容器绝对设置为 50% 的顶部位置，然后从容器中添加一半大小的负边距。

.parent_container {
    position: relative;
}

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

score 1 · Accepted Answer

尝试使用该css-tables技术垂直居中。

更多关于这篇文章中不同技术的信息。

3 回答 3