Question

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

Answer 1

垂直居中的内容

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

HTML tables
CSS tables
CSS3 flexbox
CSS3 grids

在这种情况下，现代方法是使用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表。

Answer 2

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

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

Answer 3

为自己省去一些痛苦，然后将它们分成三个独立的容器。

#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>

溢出隐藏属性将使div自动展开以显示添加到其中的任何其他内容..使其行为更像表格单元格。

以下是enter link description here

的示例

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

3 个答案: