不知道有木有童鞋切图的时候有过这样的困扰，层的垂直居中怎么搞？

作为菜菜的我此前遇到这样的需求时候搜过好多次的百度，完成需求后下次切图时候经常就忘了，反复几次后总算记下了大概的几个方法，在此分享一下

在已知div的宽高属性时候，可以这么做

div{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: 50px;}

然而更多的时候我们是希望div的高度是根据内容可伸缩的，此时借用css3也可以很容易的达到我们的需求

background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

这时候希望兼容ie的童鞋估计纠结了，那兼容性可怎么搞。

之前在搜垂直居中的时候搜到过张鑫旭的一篇博客，使用margin:auto来实现的，当时我也确确实实用着这个方法实现了层的垂直居中，但后面的使用中却是再也生不了效，百思不得其解之后给需要垂直居中的div设了个背景颜色，发现使用这种方法的层宽高是父层的100%，我以body为div的parent，于是div就覆盖了整个文档，虽然给div设了宽高之后这种方法也是能够实现垂直居中，但相较第一种方法而言实在有够鸡肋，ie8以下也不兼容。

另外，我早前在不设宽高的前提下用这种方法是怎么实现的垂直居中直到现在我还是没搞清楚原因，因为测试代码从不保存的坏习惯当时的代码要找不回了。。这个习惯不好，大家别学

width: 10px; height: 10px;
background: green;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/*transform: translate(-50%,-50%);*/

最后介绍的是用伪元素（需兼容ie7及以下的需求就加多一个空div即可）和vertical-align实现层的垂直居中（也就是此篇的重点了），具体原理我就不表了（没错其实就是我也是半懂不懂）。不过能实现效果的方法就是好方法嘛，并且这个方法的兼容性也是十分的好哒

/*此处的.before主要是兼容ie8以下浏览器，对应的dom结构我就不提供了*/

body:before,.before{
vertical-align: middle;
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
content: " ";}

.cont{
display: inline-block;
vertical-align: middle;
*display: inline;
*zoom: 1;
background: green;}