Question

在上一个问题中，我学会了如何在页面底部保留页脚div。（see other question）

现在我正试图在页眉和页脚div之间垂直居中。

所以我得到的是：

#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>

我尝试创建一个父div来容纳现有的3个div并给该div一个vertical-align：middle;但这让我无处可去。

Answer 1

在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

在旧IE（＆lt; = 7）中，你必须使用marxidad提到的绝对定位技巧。

最新浏览器you can use flexbox instead。

Answer 2

另外，据我记忆，你可以使用像this这样的黑客（更多信息here）。

Answer 3

您需要设置div的height以填充整个内容区域，或者其坐标必须位于中心。像top:50%; left:50%这样的东西，但当然会使div有点偏离右下角。

Answer 4

也许试试：

#divHeader
{
    height: 50px;
}

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

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

如何在页眉和页脚div之间居中？

4 个答案: