Html 在 div 中垂直对齐，高度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12059410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical-align in div with height 100%
提问by rzr
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
这是我的情况：我正在尝试使用两个 DIV 填充整个页面（每个高度 100%，宽度 50%）制作一个页面。此外，DIV 中的内容要垂直居中对齐。
Is there an easy way to achieve this without hacks or javascript?
有没有一种简单的方法可以在没有黑客或 javascript 的情况下实现这一目标？
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
我试过了 body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
但这不起作用……使用该代码，我必须以像素为单位指定宽度而不是百分比
回答by Lasse Christiansen
Live Demo
现场演示
I just made a jsFiddleshowing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solutionwith source code.
我刚刚制作了一个 jsFiddle，展示了我对解决方案的建议。在这里，我考虑到您希望两个<div>s 分别填充 50% 的宽度和 100% 的高度，并且您希望内容在中间垂直对齐。这是带有源代码的简化工作解决方案。
HTML
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
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;
}
For reference, I used this tutorial.
作为参考，我使用了本教程。
回答by Henrik
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
会给你一个填充到 100% 高度的盒子。确保您的 HTML 和 BODY 标签足够大：
html, body {
height: 100%;
}
回答by ygssoni
Do you want this type of design ? => Example Fiddle
你想要这种类型的设计吗？=>示例小提琴
