不知道有木有童鞋切圖的時候有過這樣的困擾，層的垂直居中怎么搞？
作為菜菜的我此前遇到這樣的需求時候搜過好多次的百度，完成需求后下次切圖時候經常就忘了，反復幾次后總算記下了大概的幾個方法，在此分享一下
在已知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;}
