[HTML&CSS]垂直置中概念。

嗯...就是沒搞懂這個概念，才會被一個小小的垂直置中卡了一、兩個小時。
過程就不紀錄了(該早點睡)，直接說明方法&概念好了！

原先以為直接使用 vertical-align:middle 這個語法就可以達到想要的結果，卻發現不然。
今天遇到的狀況是：

 我在首頁的地方，有一個"表格"，"表格"分割為四個欄位。內有圖片及文字，想要將此"表格"內的東西，視為一個整體，並達到垂直置中的效果。

開始時，我直接在該"表格"的標籤內，加上了 vertical-align:middle：

<table style="vertical-align:middle">

發現並無法達成目標，原因為這樣只是將"表格"內的東西，在"表格"內垂直置中。

而後又 google 了一下網路教學文章，發現似乎還是需要用到 div 標籤才是可行的。
因此加入了 div 將"表格"包覆起來測試：

<div  style="vertical-align:middle">
<table>
...
</table>
</div>

發現仍然無法實現，原因是 div 的長度根本沒有設定，你要叫它怎麼置中呢？ >///<...

所以，又在 CSS 部分設定了 div 的長度為 95% (單位使用%是為了要讓其自動跟隨視窗長度作調整)：

div {
height:95%;
position: absolute; /* 若要設定長、寬度，此行必加，否則 height 、 width 等設定無效 */
}

但之後發現還是不行，最後成功的作法是：

運用 <table style="vertical-align:middle"> 可將表格內的東西垂直置中的原理，新增一個表格，將原有的"表格"放進去，並且將新表格的長度也設定成95%：

<style type="text/css">
<!--
div {
height:95%;
position: absolute;
}
-->
</style>


<div>
<table height="95%" style="vertical-align:middle">
  <tr>
    <td><table>
...
</table>
</div>

如上，想要的效果就出現了！搞了這麼久，發現只是概念上的問題...
大概就是：

如果你想使用 <table style="vertical-align:middle"> 的方式來將物體置中，
則你必須給它長度！

但想實現 <table height="95%" style="vertical-align:middle"> 這個方法，你必須在其上包覆一個 div 標籤，並先設定出 div 的長度才行！
(因 table 不能抓視窗長度， div 才行。視窗長度95% ← div ← table 牽扯到母容器的概念)

再來，如果用了上個方式並給它長度之後，還可能發生的情形是─你的物體變成分散置中的對齊方式了！

為什麼？因為你的"表格"隨著視窗長度被拉長了，因此自然會變成分散對齊了......。

綜合以上，我們還需要新增一個表格，來將原先的"表格"包覆住，讓新表格視原多欄的"表格"為一個物體，然後將它垂‧直‧置‧中！！

沒錯！就是這樣！！