transform可以让不定宽高的元素水平，竖直方向上垂直居中
1.垂直居中满足的条件
>绝对定位元素
<style>
html,body{
width:100%;
height:100%;
margin:0;
}
#divContainer{
position: relative;
width:100%;
height:100%;
background:#000;
}
.div-center{
width:50%;
height:20%;
position: absolute;
left:50%;
top:50%;
background:#fff;
-ms-transform:translate(-50%,-50%); /* IE 9 */
-moz-transform:translate(-50%,-50%); /* Firefox */
-webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
-o-transform:translate(-50%,-50%); /* Opera */
transform: translate(-50%,-50%);
}
</style>
<body>
<div id="divContainer">
<div class="div-center">垂直居中元素块</div>
</div>
<script type="text/javascript">
</script>
</body>由于要兼容各种浏览器，在使用此属性的时候最好加上浏览器前缀
效果图
