一、display:table-cell属性简述

display:table-cell

属性指让标签元素以表格单元格的形式呈现，类似于

td

标签。

table-cell

同样会被其他一些CSS属性破坏，例如

float

, 

position:absolute

，所以，在使用

display:table-cell

与

float:left

或是

position:absolute

属性尽量不用同用。

二、display:table-cell与大小不固定元素的垂直居中

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;}

三、display:table-cell与两栏自适应布局

左侧为头像，右侧内容自适应。其中头像部分使用了

float

属性，左浮动，右侧使用了

display:table-cell

属性，结果就自适应了

四、display:table-cell下的等高布局

.list_row{display:table-row;}.list_cell{display:table-cell;table-layout:fixed;width:30%; padding:1.6%; background-color:#f5f5f5;}