使元素填充可用高度

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; 
}