html - 在高度为 100% 的 div 中垂直对齐

Question

<分区>

Answer 1

Live Demo

我刚刚做了 a jsFiddle显示我对解决方案的建议。在这里我考虑到你想要两个 <div> s 分别填充 50% 的宽度和 100% 的高度，并且您希望内容在中间垂直对齐。这是 simplified working solution带有源代码。

HTML

<div id="outer">
    <div id="table-container">
        <div id="table-cell">
            This content is vertically centered.
        </div>
    </div>
</div>

CSS

#outer {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

作为引用，我使用了 this tutorial .