display:table-cell 怎样使用？将一个div赋于table表格属性。

display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！

当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局，本文就display：table-cell做学习总结。

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

厦门网站建设

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。

1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度
6.高度设置百分比无效，只与内容的实际高度有关