使元素填充可用高度

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