CSS水平划分屏幕，流体中心和顶部和底部相等的休息部分

Question

我需要wordpress单帖演示文稿才能像这样工作：

[top_section]（剩余空间的一半）

[middle_section]（按内容设置的高度，即图像;无填充/边距）

[bottom_section]（剩余空间的一半）

顶部和底部的内容不应该溢出。

示例（不同的浏览器窗口高度）：

有什么想法吗？由于中间部分的流体高度，使用div并设置绝对位置不起作用。使用具有三个和高度的表格：自动或顶部和底部的50％不起作用......

Answer 1

如下所述：centering things

通过将CSS作为表格单元格处理，将块垂直居中：

DIV.container {
    min-height: 10em;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
}

height:100vh;设置允许我填充整个浏览器窗口。参考：a great answer here