display:table-cell属性 (转)

display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说 sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。 

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute 属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱 脱的一个td标签元素了。

 

1. 利用的知识点：通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果

   display:table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。    

   display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

2. 需要的注意的是， 这个布局的最大的好处是不管是单行还是多行都可以比较完美的实现居中的效果。
   
   
3. 这个方法还是回到之前的表格布局时代，仅仅提供参考

转载于:https://www.cnblogs.com/zxHappy/p/5439234.html