11

这是我的情况：我正在尝试用两个 DIV 填充整个页面（高度 100%，宽度 50%）。此外，DIV 中的内容要垂直居中对齐。

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

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

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

4

3 回答 3

13

现场演示

我刚刚做了一个 jsFiddle 来展示我对解决方案的建议。在这里，我考虑到您希望两个<div>s 分别填充 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;
}

作为参考，我使用了本教程。

于 2012-08-21T17:20:32.307 回答
0 
position: absolute;
top: 0;
bottom: 0;

会给你一个填充到 100% 高度的盒子。确保您的 HTML 和 BODY 标签足够大：

html, body {
  height: 100%;
}
于 2012-08-21T16:49:10.967 回答
0

你想要这种设计吗？=>示例小提琴

于 2012-08-21T17:10:00.487 回答