display:table:此元素會作為塊級表格來顯示（類似 <table>）;
display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似於td標簽。目前IE8+以及其他現代瀏覽器都是支持此屬性
的，但是IE6/7只能對你說sorry了，這一事實也是大大制約了display:table-cell屬性在實際項目中的應用，但是現在是移動端的天下了，ie 說拜拜吧~
與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float,
position:absolute，所以，在使用display:table-cell與float:left或是position:absolute
屬性盡量不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫
脫的一個td標簽元素了。
1. display:table-cell與大小不固定元素的垂直居中
使用display:table-cell讓大小不固定元素垂直居中已經是很老的方法了，
方便閱讀，這里再次展示下代碼：
/*這里的大小是根據高寬上限128像素圖片設置的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
div img{vertical-align:middle;}
2. 輕松實現了三欄等高布局
CSS display屬性值，包括與表格相關的屬性值：CSS display:table、 CSS display:table-row和CSS display:table-cell，
不多說，直接上代碼了：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:table</title>
<style>
*{ padding:0; margin:0;}
.main{ display:table; border-collapse:collapse; /*為表格設置合並邊框模型*/}
.nav{ display:table-cell; width:180px; background:#999;}
.extras{ display:table-cell; width:180px; padding-left:10px; border-right:1px solid #F00; background:#060;}
.content{ display:table-cell; width:300px; padding-left:10px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="main">
<div class="nav">靜安嘉</div>
<div class="extras">空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的</div>
<div class="content">阿瓦我ii啊啊啊<br><br><br><br><br><br><br>空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的空間第六節安靜的</div>
</div>
</div>
</body>
</html>
這種基於表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（注：包括FF2/FF3/Google都通過了測試）中顯示出來。