div中垂直对齐,高度为100%

Question

这是我的情况:我正在尝试制作一个包含两个DIVsfilling整页的页面(高度100%,每个宽度50%).此外,DIV中的内容将垂直对齐到中间.

有没有一个简单的方法来实现这个没有黑客或JavaScript？

我试过了 body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}

但这不起作用......并且使用该代码,我必须指定宽度(以像素为单位)而不是百分比

Answer 1

现场演示

我刚刚制作了一个jsFiddle,显示了我对解决方案的建议.在这里,我考虑到你想要两个<div>填充宽度的50%,高度100%,并且你希望内容在中间垂直对齐.这是带有源代码的简化工作解决方案.

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;
}

作为参考,我使用了本教程.