页眉 + 粘性页脚 + 覆盖其余部分的内容 div，如何使内容居中？答案

【问题标题】：header + sticky footer + content div that covers the rest, how to center content?页眉 + 粘性页脚 + 覆盖其余部分的内容 div，如何使内容居中？
【发布时间】：2013-04-03 12:10:58
【问题描述】：

我正在使用此代码。 http://jsbin.com/ibecak/1/。我从这里拿的：http://peterned.home.xs4all.nl/examples/csslayout1.html。这很好用。

但是我想在容器 div（黄色）的页眉和页脚之间的空间中将内容 div（洋红色）居中。

我如何在不破坏任何东西的情况下这样做？我尝试在#content 上设置 display: table-cell 和 vertical-align: middle ，但无济于事。

对我来说重要的是当窗口太小时页脚被推下，而不是重叠所有内容，但我仍然希望能够在#container的剩余空间中居中#content。

如果可能的话，我想知道如何仅使用 CSS 来做到这一点。

谢谢。

【问题讨论】：

标签： html css centering

【解决方案1】：

这不是一件容易的事。由于高度值在浏览器中往往会有点有趣，如果它是宽度，那么就没有问题了。

您需要使用的不仅仅是 3 个 div。

您需要将您的内容 div 放在另一个 div 中，并使用 jquery 计算页眉和页脚之间的空间高度。如果页眉和页脚的高度是固定的，它会更容易解决。

计算出身高后，您需要将 div 绝对定位在容器 div 内，使其位于空间的中间。

【讨论】：

【解决方案2】：

问题 - 我想在容器 div（黄色）的页眉和页脚之间的空间中将内容 div（洋红色）居中。

尝试将内容 div 垂直居中的困难在于不知道高度。如果它是一个固定的高度，那么你可以这样做。

示例

div#content{
    height: 300px;
    position: absolute;
    top: 50%;
    margin-top: -150px; 
    // Negative margin is half the height of content div
    // To ensure it is in the middle
}

您可以使用 jQuery 计算高度，然后设置 css 样式。

【讨论】：