display:table=>相当于“table”标签； 
display:table-row=>相当于“tr”标签； 
display:table-cell=>相当于“td”标签；

要实现这种多行文字居中显示在一个固定大小的容器里面，如果是其他的css布局实现，我们常用的做法还需要用到定位，还要用到transfrom才能完成；但是用display:table布局可以很简单的实现；

<div>

<span>我是简单的两行文字</span>

</div>

div{

    display:table;

}span{

    diaplay:table-cell;

    vertical-align: middle;//对其方式为middle

}

1.display:table 布局除了上面3种常用的值还有以下的 
table：使该元素按table样式渲染

table-row：使该元素按tr样式渲染

table-cell：使该元素按td样式渲染

table-row-group：使该元素按tbody样式渲染

table-header-group：使该元素按thead样式渲染

table-footer-group：使该元素按tfoot样式渲染

table-caption：使该元素按caption样式渲染

table-column：使该元素按col样式渲染

table-column-group：使该元素按colgroup样式渲染

2、table至少有一个display:table和display:table-cell这个其实是跟html的table一致的，那么使用了table布局之后就可以对应的使用一些table常用的css样式：如border-collapse，text-align 和 vertical-align，border-spacing，caption-side，empty-cells等等；详细的可以参考http://www.w3school.com.cn/css/css_table.asp；

3、table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。

4、设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

项目设计组   供稿