在页面中间水平和垂直居中div，页眉和页脚粘在页面的顶部和底部

Question

我正在尝试制作一个页面，其中我有一个固定高度的页眉和页脚。标题位于屏幕顶部（100％宽度），页脚位于底部（100％宽度）。我想在页眉和页脚之间的空间中居中具有可变高度内容的div。在下面的jsfiddle中，如果内容比空格短，它就可以工作，但是如果内容太长，它会越过页脚和标题。它在IE中根本不起作用（惊讶，惊讶）。

示例：http://jsfiddle.net/VrfAU/4/

编辑：我制作了一些图片，试图让它更清晰。

内容不足

大量内容

Answer 1

我最终重新开始尝试不同的方法。工作解决方案可以在下面的新jsfiddle中找到。我们的想法是将页眉和页脚与内容区域分开，以便它们位于顶部和底部。然后，更容易将内容区域集中在那些之间的空间中（对于旧版本的IE，有一些黑客攻击）。

http://jsfiddle.net/UYpnC/5/

Answer 2

尝试这样的事情：

.main { min-height: 500px }

http://jsfiddle.net/VrfAU/8/

Answer 3

我使用了css属性z-index，它控制堆栈顺序来解决这个问题： 我还使用position：fixed来修复页眉和页脚：

我把

        #header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}


.main_wrap {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: -88px;
    vertical-align: middle;
    position: relative;
    z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}