在上一个问题中，我学习了如何在页面底部保留页脚 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;但这让我无处可去。
最佳答案
在 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 (<=7) 中，您必须使用 marxidad 提到的绝对定位技巧。
在最新的浏览器中 you can use flexbox instead .
关于css - 如何使页眉和页脚 div 之间的内容居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/206770/