html - 使元素填充可用高度

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

试试看。

Answer 2

或者，您可以执行以下操作：示例

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