垂直居中显示的几个方法

1、父元素高度确定的单行文本垂直居中显示。
通过设置父元素height和line-height，使这两个值一致来实现，代码样例：

.container {    background: #ccc;    height: 500px;    line-height: 500px;}...    <div class="container">            <p>我是第一行</p>    </div>

最后结果：

总结：单行文本的垂直居中显示比较简单，其实本质就是设置父元素的行高和高度相等，但是只有一行，所以文本自然就居中了。

2、父元素高度确定的多行文本垂直居中显示。
相比于单行文本的居中显示，多行文本的垂直居中显示更具有实用意义。多行的情况下， 方法也不止一种，下面大概说两种能使文本垂直居中的方法吧。

2.1、table单元格。
有点类似之前在水平居中显示的情况类似，第一个方法我们也是通过table来实现的，即将要居中显示的元素放在一个单元格里边，然后对表格进行设置。照例，先看代码样例：

.sentences {    background: #ccc;    height: 500px;}...    <div class="container">        <table><tr><td class="sentences">            <p>我是第一行</p>            <p>我是第二行</p>        </td></tr></table>    </div>

最后结果：

总结：这种方法原理其实也很简单，就是通过将各种想要显示的元素整合放进一个单元格里边，然后利用浏览器表格表单数据默认垂直居中显示的特性，来实现我们显示的目的。在这里，多行的对象不一定非得是文本，图像或者其他块状元素都可以。只不过这种方法还是会引入比较多没有意义的标签，代码的简洁性会打一定折扣。

2.2、利用专门的属性进行设置。
代码样例：

.container {    background: #ccc;    display: table-cell;    vertical-align: middle;    height:500px;}...    <div class="container">            <p>我是第一行</p>            <p>我是第二行</p>            <p>我是第三行</p>            <p>我是第四行</p>    </div>

最后结果：

总结：这种方法应用起来比较简单，也没有什么好理解不好理解的问题，只要记着会运用就行，只不过这种方法兼容性不太好，ie8以前的版本不支持，所以使用的时候需要注意。

好了，这就是我今天所学的垂直居中显示的几个方法。