div垂直居中的问题

工作和面试时常常会遇到怎么设置div垂直居中与浏览器中：包括固定宽高和不固定宽高的

1、固定宽高的div垂直居中

　　宽高固定的div很容易设置让其垂直居中

<div class="center">
    固定宽高的div垂直居中
</div>

.center {
    width:500px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-150px;
    background:#3CF;
   }

2、未知宽高的div垂直居中

<div class="center">
    未知宽高的div垂直居中
</div>

.center {
     position:fixed;
     top: 50%;
     left: 50%;
     background-color:#f60;
     width:50%;
     height:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    -o-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%);
    }