div垂直居中 水平居中

.center-vertical{

position:relative;

top:50%;//父类高度的50%

-webkit-transform:translateY(-50%)//自己高度的50%

}

.center-horizontal{

position:relative;

left:50%;

-webkit-transform:translateX(-50%);

}

#wrap{
    background: red;
    width:400px;
    height:200px;
}
#content{
    background: blue;
    width:300px;
    height:100px;
}
.center-vertical{
    position:relative;
    top:50%;
    -webkit-transform:translateY(-50%);
}
.center-horizontal{
    position:relative;
    left:50%;
    -webkit-transform:translateX(-50%);
}
.center-center{
    position:relative;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
}

<div id="wrap">
        <div id="content" class="center-center">
        </div>
</div>

效果图：