一：什么是table-cell
display:table-cell 就是标签属性以表格形式呈现，有点像td，IE8以上兼容
二：display:table-cell使用注意
1. float，position：absolute对其有一定的破坏性；
2. 宽度高度敏感
3. 对margin毫无反映，响应padding属性
4. 类容溢出会自动撑开父元素
三：display:table-cell的几种用法
1. 大小不固定的元素垂直居中
.parent{
display: table-cell; padding: 10px;
border: 2px solid #999;
}
.parent div {
display: inline-block;
vertical-align: middle;
}
display：table-cell 加上 vertical-align：middle 使高度不同的元素都垂直居中，其中div的display：inline-block使几个div在同一行显示。
2. 两列自适应布局
.content {
display: table;
padding: 10px;
border: 2px solid #999;
}
.left-box {
float: left;
margin-right: 10px;
}
.right-box {
display: table-cell;
padding: 10px;
width: 3000px;
vertical-align: top;
border: 1px solid #ccc;
}
左侧是有 float:left,右侧使用 display：table-cell
3. 等高布局
子集都display：table-cell