display：table的幾個用法(元素平分寬度，垂直居中)

DIV+CSS的佈局已經讓表格佈局幾乎不多用到，除非表格語義性很強的狀況。

display：table解決了一部分須要使用表格特性但又不須要表格語義的狀況，

尤爲是DIV+CSS很不方便解決的問題，好比如下兩種狀況：

1、父元素寬度固定，想讓若干個子元素平分寬度

　　一般的作法是手動設置子元素的寬度，若是設置百分數不必定能整除，設置具體的數值又限制了父元素的寬度固定，很煩。

能夠使用display：table來解決：

 <style type="text/css">
        .parentDiv {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: table;
        }

        .sonDiv {
            border: 1px solid blue;
            display: table-cell;
        }
    </style>
    <div class="parentDiv">
        <div class="sonDiv">三個div品均分配父div的空間</div>
        <div class="sonDiv">三個div品均分配父div的空間</div>
        <div class="sonDiv">三個div品均分配父div的空間</div>
    </div>

界面顯示效果：

如此一來，就算是三個或者六個元素也能夠很方便均分父元素的寬度了。

 

2、塊級子元素垂直居中

想讓一個div或p在父元素中垂直居中一直是不少人解決不了的問題（注意直接對塊級元素使用vertical-align是不能解決這個問題的，vertical-align定義行內元素的基線相對於該元素所在行的基線的垂直對齊），一樣能夠使用display：table方便解決：

<style type="text/css">
        .parentDiv {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: table;
        }

        .sonDiv {
            border:1px solid blue;
            text-align:center;
            display: table-cell; 
            vertical-align:middle
        }
    </style>
    <div class="parentDiv">
        <div class="sonDiv">
            <img src="img/Koala.jpg" />
        </div>
    </div>

界面顯示效果：

將塊級子元素的display設置爲table-cell以後再使用vertical-align就能夠了。

注意：雖然display：table解決了避免使用表格的問題，但有幾個須要注意的：

（1）display: table時padding會失效
（2）display: table-row時margin、padding同時失效
（3）display: table-cell時margin會失效