CSS实现垂直居中的两种方式

最近上遇到的垂直居中的问题，在网上搜罗了一些资料在这里给大家讲解一下，在容器里内容始终垂直居中，实现这个效果我总结了2种方法，一起来看实例。

第一种方法：

用CSS3的transform属性来实现，如下建立父子级的容器和CSS。这种方法有点类似相对/绝对定位关系。由于top属性是内联的，我们需要在子级减去这些高度就可以得到居中的效果了。

<div class="parent">
    <div class="children"></div>
</div>
.children {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%); /* For IE */
}

第二种方法：
使用display元素的table化属性。我们知道在css2中display有table和table-cell属性，类似将div元素table化，这样我们也可以将内容垂直居中。注意父级容器的高度必须标注，它是子级容器的参考标准。

<div class="parent1">
    <div class="children1"></div>
</div>
.parent1 {
	display: table;
}
.children1 {
	display: table-cell;
        vertical-align: middle;
}

一起来看下这两种方法的浏览器支持表, transform需要IE8以上，而table则IE7以上支持。
所以使用第二种方法大家可以写一些padding的hack，保证在IE7以下垂直高度一样，如:

*padding-top: XXpx;
_padding-top: XXpx;

http://caniuse.com/#search=transform

http://caniuse.com/#search=table