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

Question

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

Answer 1

垂直居中内容

在不使用JavaScript，有方式有限数量的垂直居中动态内容：

1. HTML tables
2. CSS tables
3. CSS3 flexbox
4. 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 tables
• CSS tables

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

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

对于非表格数据（例如，总体布置），有利于使用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