摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。

看了這篇文章，你可以了解到以下布局方法：

table-cell

定高水平垂直居中

不定高水平垂直居中

單行定高水平垂直居中

單行不定高水平垂直居中

多行定高水平垂直居中

多行不定高水平垂直居中

多列等高布局

左邊定寬右邊自適應布局

左邊右邊定寬中間自適應三列布局

最近開發遇到一些布局上的問題，由于不確定因素比較多，比如不定寬高、單行多行的情況需要顯示的樣式基本相同。這樣的情況會比較復雜，后來找到display:table-cell這個布局神器，這些問題也就不是問題了。比如以下這種情況：

基于這樣的需求，我們通常都是每一種情況需要多帶帶的寫一份hack樣式，這樣寫起來很麻煩。我們多么希望寫一份樣式，不管你里面的節點如何變，定不定寬高，多行與否都能表現一致。針對水平|垂直居中的情況，我找到了table-cell布局的方式，基本能解決。下面會總結一下table-cell的布局原理以及列舉一些日常布局所遇到的情況。

雖然table布局因為它的一些非語義化、布局代碼冗余，以及不好維護改版等缺點被趕出了布局界。但是在css不給力時期，table布局也曾風靡一時，就算現在看來table的一些布局的特性也是非常給力的，而幸好css也吸取了table布局一些好的特性為己用。讓我們可以使用更少、更語義化的標簽來模擬table布局，可以跳過table布局的缺點又實現我們想要的效果，所以我們首先需要了解table的一些特性以及對應的css屬性。
我們在不居中使用到的也就是table、tr、td的一些特性，所以我們只需要了解這三個標簽的特性就足夠了。

1) table可設置寬高、margin、border、padding等屬性。屬性值的單位可以使用px，百分比值。
2) table的寬度默認由內容的寬高撐開，如果table設置了寬度，寬度默認被它里面的td平均分，如果給某一個td設置寬度，那么table剩余的寬度會被其他的td平均分（有點類似flex布局）
3) 給table設置的高度起到的作用只是min-height的作用，當內容的高度高于設置的高度時，table的高度會被撐高。

1) 給tr設置高度只起到min-height的作用，默認會平分table的高度。
2) tr中的td默認高度會繼承tr的高度，若給任一td設置了高度，其他td的高度也同樣變高。適合多列等高布局
3) 設置寬度、margin、都不起作用

1) td默認繼承tr的高度，且平分table的寬度
2) 若table（display:table）不存在，給td設置的寬高不能用百分比只能用準確的數值
3) 給td設置vertical-align: middle; td元素里面(除float、position:absolute)所有的塊級、非塊級元素都會相對于td垂直居中
4) 給td設置text-align: center; td元素里面所有非block元素(除float、position:absolute)都會相對于td水平居中，雖然block元素不居中，但其中的文字或inline元素會水平居中

了解了table的一些屬性，當我們遇到一些水平垂直居中的布局時，就會變得so easy了。

圖片本身就是inline-block元素，那么我們只要給它的父級元素加個display:table-cell就好了

.box{
    height: 200px;
    width: 200px;
    display: table-cell;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: middle;
}

    

就是那么簡單。demo

我們平時常見的就是單行水平垂直居中，其實就是簡單的text-align：center; 然后再是line-height:xx 就搞定了。但是多行的就相對于復雜點。但是使用了table-cell之后，就變得很簡單了

當然，里面也可以是多個標簽形成的多行，然后進行水平垂直居中

demo1 demo2
其實實現的原理還是使用table-cell，先把外層box設置為table-cell，再把里面的元素設置為inline|inline-block(不定寬高|元素居中)或者block(寬度100%|文字居中)那么就可以控制里面的元素水平垂直居中了?；谶@樣的布局方式，你就可以把什么定高|不定高|定寬|不定寬|多行|單行的水平垂直居中都搞定了。

由于display:table-cell對浮動元素是不起作用的，當我們需要兩個元素一個左浮動一個右浮動，并且這連個元素還居中的時候。上面的方法就不起作用了。那我們可以換個法子，既然display:table-cell;的垂直居中不能直接對浮動元素起作用，那就來個間接的嘛。給兩個浮動的元素外面一個display:inline-block;的元素，并且清除浮動。然后讓display:table-cell的垂直居中對inline-block元素起作用就好了。demo

如果你的需求還需要在兩個浮動的元素中再添加水平垂直居中的話，那么同樣的道理，只需要在這兩個元素中構造符合table-cell布局的結構就好了。

經常會有這樣的需求，一列里面可能會有1、2、3個子元素，不管幾個都是要居中的。有了table-cell就可以輕松解決了。
實現原理也基本是把外層box設置為display:table-cell;然后設置居中。里面的元素item設置成inline或者line-block;就可以了，不管里面的item的個數多少，都會居中的，包括item是圖片也會這樣。[demo]()

有這樣的需求，一行有三個item，三個item的高度不定，但是這一行的三個item最終的高度以最高的那個為準。按照以前的做法要不就是砍掉需求，必須定高。實在不行就是等加載完之后用js計算三個item的高度，然后把最高的高度給其他item設置高度。這樣有點惡心，并且會出現抖動。有了table-cell之后，這個就不成問題了，因為在一個tr中，里面的td必須是等高的，而不管里面內容的高度。demo

認證看代碼你會發現跟我們平時的定高布局布局不一樣，每行外面必須得有一個ul來保證里面item的等高，并且里面還需要使用多余的li來控制間距。這樣做的原因是因為tr里面的元素不會自動換行，所以必須手動換行，給外面加個ul，（說好的tr呢？）是這樣的，被設置為display:table-cell的元素會跟相鄰的兄弟元素共同生成一個虛擬的table、tr把自己包起來，誰叫td只能包在table里面呢。但是你直接寫td標簽是不會產生這樣的效果的。而使用多余的li來控制間距是因為table-cell元素不認識margin，所以只能這樣做了。
在生成機構的時候就需要判斷什么時候該換行了，而不是像以前一樣在一個ul里面生成全部的li了

demo

demo

使用table-cell還可以實現很多的布局，需要自己去發揮想象?？偨Y下來也就需要記住幾點，設置了display:table-cell的元素具有以下特性。

text-align、vertical-align等對齊屬性起作用，margin不起作用。寬高百分比值不起作用。

會生成虛擬的table、tr把自己包裹住，如果有相鄰的兄弟元素也被設置了table-cell,則會跟兄弟元素一起生成虛擬的table、tr把自己包裹住，并一行等高顯示

多個table-cell元素會占滿被設置了display: table的元素的寬度，如果一個元素被設置了寬度，那么其他剩余的table-cell元素會占滿剩下的寬度。當然，如果只有一個table-cell元素，就算設置了寬度也會占滿table元素的寬度。

對設置了float、absolute的元素不起作用。且IE6、7不支持

這就是所謂的table布局大法。

inline-block元素把自己變成特殊的inline元素，對于相鄰的元素來說表現出inline的特點，允許空格。對于內部元素來說表現出block元素的特點，可以設置高度和寬度。

空格是兩個標簽中存在換行符or制表符or空格符（其實就是縮進）的原因生產的，只需要給設置了inline-block屬性的父元素設置font-size:0,就可以使標簽中的空格失去寬度