表格布局display: table

看看关于table的display可选值：

table：指定对象作为块元素级的表格，相当于html标签<table>
inline-table：指定对象作为内联元素级的表格，相当于html标签<table>
table-caption：指定对象作为表格标题，相当于html标签<caption>
table-cell：指定对象作为表格单元格，相当于html标签<td>
table-row：指定对象作为表格行，相当于html标签<tr>
table-row-group：指定对象作为表格行组，相当于html标签<tbody>
table-column：指定对象作为表格列，相当于html标签<col>
table-column-group：指定对象作为表格列组显示，相当于html标签<colgroup>
table-header-group：指定对象作为表格标题组，相当于html标签<thead>
table-footer-group：指定对象作为表格脚注组，相当于html标签<tfoot>

display: table和table-cell的垂直居中布局

html:

<div class="parent">
  <p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、
	 发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
	 再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
  </p>
</div>

css:

.parent {
   display: table;
   width: 300px;
   height: 300px;
   text-align: center;
}
.son  {
   display: table-cell;
   height: 200px;
   background-color: yellow;
   vertical-align: middle;
}

将容器设为display:table让他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle多行文字垂直居中啦！

display:table和display:table-cell的妙用
表格布局display: table的妙用