如何将内容居中于页眉和页脚div之间?

In a previous question, I learned how to keep a footer div at the bottom of the page. (see other question)

在前面的一个问题中，我学习了如何在页面底部保留页脚div。(见另一个问题)

Now I'm trying to vertically center content between the header and footer divs.

现在我尝试在页眉和页脚之间垂直居中。

so what I've got is:

我得到的是

#divHeader
{
    height: 50px;
}

#divContent
{
    position:absolute;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}
<div id="divHeader">
    Header
</div>
<div id="divContent">
    Content
</div>
<div id="divFooter">
    Footer
</div>

I've tried creating a parent div to house the existing 3 divs and giving that div a vertical-align:middle; but that gets me nowhere.

我尝试创建一个父div来存放现有的3个div并给这个div一个垂直对齐:middle;但这对我来说毫无意义。

4 个解决方案

#1

In CSS2:

在CSS2:

html,body {height:100%;}
body {display:table;}
div {display:table-row;}
#content {
    display:table-cell;
    vertical-align:middle;
}

<body>
<div>header</div>
<div id="content">content</div>
<div>footer</div>
</body>

http://codepen.io/anon/pen/doMwvJ

In old IE (<=7) you have to use trick with absolute positioning that marxidad mentioned.

在老IE(<=7)中，你必须使用马克思提到的带有绝对定位的技巧。

And in latest browsers you can use flexbox instead.

在最新的浏览器中，你可以使用flexbox。

#2

In alternative, as far as I remember, you can using hacks like this (more info here).

另外，据我所知，你可以使用像这样的技巧(更多信息在这里)。

#3

You need to either set the height of the div to fill the whole content area or its coordinates have to be in the center. Something like top:50%; left:50% but of course that will make the div a bit off to the bottom-right.

您需要设置div的高度来填充整个内容区域，或者它的坐标必须位于中心。类似上图:50%;左:50%，但这当然会让div在右下角有点偏。

#4

-1

Maybe try:

也许试试:

#divHeader
{
    height: 50px;
}

#divContent
{
    /*position:absolute;*/
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#divFooter
{
    height: 50px;
    position:absolute;
    bottom:0;
    width:100%;
}

#1