div中垂直对齐，高度为100％

Question

这是我的情况：我正在尝试制作一个包含两个DIV填充整页的页面（高度100％，每个宽度50％）。此外，DIV中的内容将垂直对齐到中间。

有没有简单的方法可以在没有黑客或javascript的情况下实现这一目标？

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

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

Answer 1

Live Demo

我刚才a jsFiddle向我提出了解决方案的建议。在这里，我考虑到你希望两个<div>填充每个宽度的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。

Answer 2

position: absolute;
top: 0;
bottom: 0;

会给你一个装满100％高度的盒子。确保您的HTML和BODY标记足够大：

html, body {
  height: 100%;
}

Answer 3

你想要这种类型的设计吗？ =＆GT; Example Fiddle