垂直居中常用布局

<!-- html结构 --> 
<div class="wrap"> <div class="box"></div> </div> 
 
/* css样式 */
 
/* (1) 模仿单行文字居中的方式 */
 
.wrap {
 
    width: 200px;
 
    height: 80px;
 
    line-height: 80px;
 
}
 
.box {
 
    display: inline-block;
 
    vertical-align:middle;
 
}
 
/* (2) 已知宽高，通过position:absolute; */
 
.wrap {
 
    width: 200px;
 
    height: 200px;
 
    position: relative;
 
}
 
.box {
 
    width: 100px;
 
    height: 80px;
 
    position: absolute;
 
    left: 50%;
 
    top: 50%;
 
    margin: -50px 0 0 -40px;
 
}
 
/* (3) 未知宽高，通过css3属性 transfrom */
 
.wrap {
 
    width: 200px;
 
    height: 200px;
 
    position: relative;
 
}
 
.box {
 
    position: absolute;
 
    left: 50%;
 
    top: 50%;
 
    -webkit-transform: translateX(-50%) translateY(-50%);
 
    transform: translateX(-50%) translateY(-50%);
 
}
 
/* (4) 通过flex布局 */
 
<!-- html结构 -->  <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> 
 
/* css样式 */
 
.flexbox {
 
    display: -webkit-box;
 
    display: -moz-box;
 
    display: -ms-flexbox;
 
    display: -webkit-flex;
 
    display: flex;
 
}
 
/* 水平居中 */
 
.flexbox-center {
 
    -webkit-box-pack: center;
 
    -moz-box-pack: center;
 
    -ms-flex-pack: center;
 
    -webkit-justify-content: center;
 
    justify-content: center;
 
}
 
/* 垂直居中 */
 
.flexbox-middle {
 
    -webkit-box-align: center;
 
    -moz-box-align: center;
 
    -ms-flex-align: center;
 
    -webkit-align-items: center;
 
    align-items: center;
 
}

http://caibaojian.com/mobile-web-app-fix.html