css - 是否有一种 CSS 方法可以使 div 在顶部和底部的 2 个固定边距之间垂直居中？

Question

如果可能，我如何才能仅使用 CSS 使 div 在顶部和底部的固定边距之间垂直居中？边距用于容纳页眉和页脚。

http://jsfiddle.net/u8PhW/6/

<div id="header" style="position: fixed; height: 200px; background-color: orange;"></div>
<div class="viewport" style="overflow: hidden">
    <div class="page">
        <div class="content">Vertically Aligned Section 1</div>
    </div>
    <div class="page">
        <div class="content">Vertically Aligned Section 2</div>
    </div>
</div>
<div id="footer" style="position: fixed; height: 50px; bottom: 0px; background-color: gray;"></div>

这个 HTML 的想法是有一个固定的页眉和页脚，内容应该在这两个 div 之间居中。此外，javascript 允许“跳转”到不同的页面。这些页面中的内容应位于页眉和页脚之间。

Answer 1

Demo

CSS

div.content {
    position: fixed;
    background-color: red;
    top:200px;
    bottom:50px;
    margin:auto;
    height: 200px;
}