如何在页眉和页脚 div 之间垂直对齐内容 div？答案

【问题标题】：How do I vertically align a content div between a header and footer div?如何在页眉和页脚 div 之间垂直对齐内容 div？
【发布时间】：2013-03-04 06:04:05
【问题描述】：

我的模板中有三行主 div。我有一个页眉、一个内容包装器和一个页脚。页眉紧贴顶部，页脚紧贴底部。我在两者之间有一个内容包装器 div。我基本上想在两个 div 中垂直居中内容包装器。内容 div 将始终是动态高度，因此 line-height 方法对我不起作用。对我来说最好的方法是什么？

【问题讨论】：

相关问题：stackoverflow.com/questions/5004665

标签： css xhtml vertical-alignment

【解决方案1】：

垂直居中内容

不使用 JavaScript，垂直居中动态内容的方法有限：

在这种情况下，现代方法是使用 CSS 表格，相当于 HTML 表格。但如果需要支持 IE7 或更早版本，则改用 HTML 表格。 Flexbox 不适合这种特殊情况，并且它不受 IE9 和更早版本的支持。 CSS网格目前只有IE10支持，标准还没有定稿。

CSS表格的基本用法是：

HTML

<div class="table">
    <div class="row">
        <div class="cell">Content</div>
    </div>
</div>

CSS

.table {display: table;}
.row   {display: table-row;}
.cell  {display: table-cell;}

演示（测试于：IE8/9/10、FF、Chrome、Safari、Opera）

在 HTML 表格和 CSS 表格之间进行选择

对于表格数据（例如，数据网格），倾向于使用HTML 表格。在这种情况下，它在语义上更正确，并且可以更容易理解源代码的性质，这可能有助于可访问性和 SEO（以及代码的可维护性）。

对于非表格数据（例如，一般布局），倾向于使用 CSS 表格（如果浮动和 CSS 定位不充分）。它在语义上更正确，因为使用 HTML 表格会产生对表格数据的期望，并且它可能不会让屏幕阅读器和搜索引擎感到困惑。布局的具体用途包括垂直居中的内容和等高的列。

CSS 表格相对于 HTML 表格的一个特别优势是支持visibility:collapse，它允许行或列折叠（HTML 表格无法做到这一点）。如果需要表格数据的特定功能，请使用 CSS 表格。

【讨论】：

【解决方案2】：

免去一些痛苦，只需将它们分成三个单独的容器。

#header {
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#content{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#footer{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}

<div id="header">test</div>
<div id="content">test</div>
<div id="footer">test</div>

overflow hidden 属性将使 div 自动展开以显示添加到其中的任何其他内容。使其表现得更像表格单元格。

这是一个例子enter link description here

【讨论】：

这解决了水平居中问题，但问题是关于垂直居中页面上的主要内容。
在 div 中垂直居中内容可能会变得很棘手，因为没有像表格单元格那样简单的方法来做到这一点。您可以将内容包装在子 div 中，然后使用 margin-top。 jsfiddle.net/FKnpM/2
从历史上看，是的，但在现代浏览器中，CSS 表格布局提供了一种使用 div 实现此目的的简单方法。请参阅我发布的答案以获取更多信息。
您可以使用 div 表，但我个人不使用它们。除了真正的表格之外，使用它们并没有真正的好处，所以它有点违背了用 CSS 构建网站的目的。 Div 表添加了代码，具有严格的结构（就像普通的 HTML 表一样），并且可能会遇到与常规表布局相同的跨浏览器问题。
做了一些额外的研究。在两者之间进行选择主要是关于语义正确性以及是否需要对visibility:collapse 的支持。我在答案中添加了有关此的信息。

【解决方案3】：

您可以使用以下代码执行此操作：-

<div> using display:table-cell; vertical-align:middle

【讨论】：

所做的只是将我的内容 div 重新对齐到左侧，并使其宽度无效。
这不是一个完整的css代码，你必须添加其他css代码，上面的代码只是证书中心的内容，没有其他任何东西
@ShoeLace1291: display:table-cell 是现代浏览器的首选方法。 @Chase1986：+1 将事情转向正确的方向。