使元素填充可用高度

Question

我需要使元素的边距扩大以使其居中在页面上。

元素1和3应分别粘贴到顶部和底部。
元素2有一个固定的高度，应该在页面居中。

我不知道如果我解释这还不够清楚，所以我画了一幅画：

Answer 1

修复元素1和元素3分别使用绝对定位到页面的顶部和底部。然后，绝对定位元素2的顶部50%并设置其高度的一半的负上边距：

#top, #middle, #bottom { position: absolute; left: 0; right: 0; } 
#top { top: 0; } 
#middle { top: 50%; margin-top: -25px; height: 50px; } 
#bottom { bottom: 0; } 

Try it.

Answer 2

或者，你可以做这样的事情：Example

body, html { 
    height: 100%; 
    display: table; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
header, div, footer { 
    width: 100%; 
    display: table-row; 
} 
header { 
    height: 50px; 
} 
footer { 
    height: 50px; 
}