CSS水平划分屏幕，流体中心和顶部和底部相等的其余部分答案

【问题标题】：CSS divide screen horizontally with fluid centre and equal rest parts top and bottomCSS水平划分屏幕，流体中心和顶部和底部相等的其余部分
【发布时间】：2014-10-17 03:55:39
【问题描述】：

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

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

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

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

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

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

有什么想法吗？由于中间部分的流体高度，使用 div 和设置绝对位置不起作用。在顶部和底部使用具有三个 's 和 height:auto 或 50% 的表格不起作用...

【问题讨论】：

请至少用MS Paint画点东西，我不确定顶部需要如何处理剩余的：/？
示例：可用浏览器区域为 750px。中心图像高度为 400，顶部和底部条应各为 175px。如果图像更改为 300 像素，则无论内容如何，顶部和底部栏都应为 225 像素。如果浏览器窗口为 600 像素，则对于 400 像素的图像，顶部和底部底部栏应为 100 像素，依此类推...

标签： css layout centering

【解决方案1】：

如此处所述：centering things

通过在 CSS 中将块视为表格单元格来垂直居中：

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

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

【讨论】：