如果查看css手冊，會發現display有許多帶table字樣的可選屬性，有table、inline-table、table-row-group、table-row、table-cell等10個之多，可以賦予div類似於<table>等標簽的布局特性。大多數瀏覽器（IE6/7除外）對其支持良好，其實現原理參考《匿名表格元素》。
組合使用display:table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中（內部div設置display:inline-block即可）。這在子元素不確定寬高和數量時，特別實用！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo001_displayTable</title>
<style>
/*** table-cell middle center組合使用 ***/
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
</style>
</head>
<body>
<div class="cell">
<p>我愛你</p>
</div>
<div class="cell">
<p>我愛你</p><p>親愛的中國</p>
</div>
<div class="cell">
<p>我愛你</p><p>親愛的中國</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
</body>
</html>
效果：
對於只需要垂直居中的情況，可以去掉text-align:center屬性。
對table-cell元素設置百分比（如100%）的寬高值時無效的，但是可以將父元素設置display:table，再將父元素設置百分比寬高，子元素table-cell會自動撐滿父元素。這就可以做相對於整個頁面的水平垂直居中。代碼示例如下：
<style>
html,body{height: 100%;margin:0;padding:0;}
/*** .table和.cell都將撐滿頁面，cell的子元素水平垂直居中 ***/
.table{
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #666;
}
</style>
<div class="table">
<div class="cell">
<p>我愛你</p>
<p>親愛的中國</p>
<div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
</div>
table系列的display屬性還可以實現等高布局、靈活頁眉/頁腳、水平自適應布局等等，參考文章《css Table布局》《display:table-cell的應用》。
特別提醒：
1.table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height。
2.設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性。