display：table-cell

一：什么是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

 

转载于:https://www.cnblogs.com/renshijie/p/8111751.html