如何垂直對齊頁眉和頁腳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