我们在使用表格的时候，会看到表格中的单元格一般具有怎么样的特点呢？文字的垂直居中对齐，关联伸缩等等，这些都是表格单元格具有的特点。而display:table-cell可以让元素具有这些特点！
这个属性可以使得我们在布局时候实现下面三个功能：
（1）图片垂直居中于元素（在其他随笔中有记录，略）
（2）等高布局
同一行的单元格td元素高度是相等的，因此，table-cell也是具备这个特点。
eg:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#wrapper{display:table-row;}
#img-box{
display:table-cell;
150px;
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
border:1px solid red;
}
#text-box{
display:table-cell;
200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box"><img src="images/haizeil.png" alt=""/></div>
<div id="text-box"><p>这是一段文字</p></div>
</div>
</body>
</html>
在这个例子中，我们在左右两个盒子中都没有加上高度，但是两个盒子的高度都刚好相等，这就是自适应等高布局。高度由两者间最大的高度而决定
（3）自动平均划分元素，并且在一行显示
要让无序列表横向布局，我们通常会改变它的display属性为inline-block元素或是将其定义为浮动元素。但是我们可以利用display：table-cell来解决，并且还能自动平均划分元素。
语法：
#father{display:table;}
#son{display:table-cell;}
只要给父元素定义宽度，就会自动划分子元素们
补充：去除inline-block元素间距
inline-block元素之间是有间距，这会影响我们的布局，可以使用font-size：0；来去除这个情况
语法：
#father{font-size:0;}