1. display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。我們都知道，單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，所以display:table-cell還是有不少潛在的使用價值的

與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，display:table-cell與float:left或是position:absolute屬性盡量不要用時使用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了

2. display:table-cell與大小不固定元素的垂直居中

這里的實現是借助了IE默認文字空間的概念，將font-size設置得很大，目的是撐開IE下默認文字空間的高度，然后通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊

3. display:table-cell與兩欄自適應布局

左側為頭像，右側內容自適應。其中頭像部分使用了float屬性，左浮動，IE8+以及Firefox、Chrome、Opera等現代瀏覽器右側使用了display:table-cell屬性，結果就自適應了，很簡單的代碼，很神奇的效果

在本例demo中，右側內容足夠多，所以寬度完整的撐開了，如果內容有限，則寬度就是內容的寬度，此時想要讓某個元素（例如關閉按鈕）右側定位就會有問題，解決方法就是定義一個非常寬的寬度，就像上面facebook截圖中的CSS屬性一樣，所以，考慮到各種情況，更健壯耐用的CSS代碼應如下：

4. display:table-cell下的等高布局

table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以，很多時候，我們需要等高布局的時候，就可以借助display:table-cell屬性。說到table-cell的布局，不得不說一下“匿名表格元素創建規則”

舉個例子吧，如果我們為元素使用“display:table-cell;”屬性，而不將其父容器設置為“display:table-row;”屬性，瀏覽器會默認創建出一個表格行，就好像文檔中真的存在一個被聲明的表格行一樣

實現等高布局，毫無疑問，display:table-cell是首選，這就好比鼴鼠，生下來就是為了打洞用的。考慮到匿名創建表格元素的問題，所有table-cell元素外一定要留有一個用來包裹的標簽。于是，我們有類似下面的CSS代碼

5. display:table-cell下的列表布局

這里的列表布局專指橫向repeat的布局，就像下圖所示的

一般這類布局都是使用浮動的。但是浮動布局的不足在于：一是需要清除浮動造成影響；二是不支持不定高列表的浮動。替代浮動布局的方法是有的，如果深究細節以及一些思想，方法還不少。其中有一個方法就是使用display:table-cell

display:table-cell下的列表布局最適用的場景是：列表個數不固定，但是，無論列表幾個，都平分容器空間。什么意思呢？就是如果4個列表，希望每個寬度25%，3個就33.3333%，2個列表希望每個寬度50%。此時，沒有比display:table-cell更合適的技術了

父級設置display:table同時寬度為容器寬度，或者直接width:100%，此時，display:table-cell子元素就會自動等分

總結

以上是生活随笔為你收集整理的display:table-cell的集中应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。