主要運用到的是：布局神器display:table-cell
元素兩端對齊
第一個案例是讓兩個元素分別向左和向右對齊，如果是過去，我一定會用float來實現，但其實用table可以這么做：
自動平均划分每個小模塊，使其一行顯示
第二個案例我們先看看圖：
遇到上面這種布局，一般會用float來做，或者把每個li設置成display:inline-block;來做，並且都要設置給他們設置一個寬度，而且最痛苦的是5個li如果你設置width:20%;他們一定會掉下來，如果li都設置成display:table-cell；就不會出現這種情況，即使不設置寬度他們也會在一行顯示，你在加多一行他也不會掉下來，依舊會在一樣顯示。
圖片垂直居中於元素
有時候我們需要讓圖片垂直水平都居中於某個元素，用常規寫法比較復雜，但用table-cell則相對簡單：
兩box實現等高對齊
上圖中的左側的box的高度始終跟隨右側的box的高度變化而變化：
上面的案例我故意不對右側的box設置display:table-cell，只對左側，所以就會出現左側跟隨右側高度變化而變化，如果要實現不管兩個box哪個高度產生變化另一個就跟隨，只需要把右側的box也設置成display:table－cell就可以實現了。
彈性、響應式布局
上面的demo中大家只要改變瀏覽器寬度就會發現他們其實都是會隨高度變化自動變化高度的，其實上面內容我大部分沒有設置絕對單位，即使設置了也只設置其中一個box另一個就讓他去自適應父元素的剩余留下來的寬度，其實布局的時候設置寬度是一件很痛苦的事情，因為除了大量計算有時候可能在多瀏覽器下還算不准，可能你在chrome設好的寬度在ie下就坑爹了，要寫hack才能解決。最后一個案例，據不靠譜的傳言faceboox曾經也這么使用過：DEMO5
移動端布局因為有display:box這等屬性，所以table-cell相對就排不上什么大用場，不過在移動端你要用table-cell也不是不可以，根據自己對屬性的理解去使用就可以了。
注意：與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了。