display:table和display:table-cell实现单行，多行文本垂直居中

        今天工作中遇到了一个问题，一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样：

        一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。

<div>
	<p>
		hello world <br />
		hello world <br />
		hello world <br />
		hello world
	</p>
</div>

			body {
				background: #ccc;
			}
			div{
				display: table;
				text-align: center;
				margin: 100px auto;
				background: #fff;
			}
			p{
				display: table-cell;
				vertical-align: middle;
				width: 500px;
				height: 200px;
			}

         给父元素<div>设置display:table，子元素<p>设置display:table-cell，再加上一个vertical-align:middle（默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性），于是单行多行的文本垂直居中问题就解决了，不论内容有多少，不论行高是多少，总之都会整体垂直居中，像这样：（以下截图皆在chrome浏览器）

        其实这就相当于模拟了table的布局属性，display:table相当于<table>，display:table-cell，就相当于<th><td>，我们不妨来看下<table>，<th>，<td>，在浏览器的默认属性：

 

        由上图可以看出，table的默认属性是：display:table，td、th的默认属性是display:table-cell，之所以不使用table标签布局，也是为了适应移动端的自适应布局和div+css的潮流，不过table布局的某些优越性div确实无可比拟（比如在使用数据表格上），为了能尽量做到两全其美，这种table标签的属性就派上了用场。不过给标签加上display:table、display:table-cell 和 table标签、th td标签本身还是有区别的，这就是浏览器对标签解析的默认属性上：

        再仔细看上图，table除了有display:table，还有其他3个属性，而th，td也还有vertical-align:inherit属性。th，td的垂直对其方式默认是从父元素继承，接着看下图：

        th、td父元素是<tr>，<tr>也是从父元素继承，再往上则是tbody（table布局浏览器都会自动生成这个标签），而tbody的默认vertical-align是middle（这个我在IE和Firefox都得到了认证），所以当我们给其他标签加上display:table-cell时，并没有这个属性，所以上文为了使文本垂直居中，需要我们手动加上vertical-align:middle。

页面布局看似简单，但想有真正的深入理解，还要下很多的功夫呢。知道的越多越是感觉自己无知。