方法一：利用CSS3的transform:translate

.center{
    width:50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

方法二：利用flexbox

.center {
　　display: -webkit-box;
　　display: -moz-box;
　　display: -ms-flexbox;
　　display: -webkit-flex;
　　display: flex;
　　-webkit-box-align: center;
　　-moz-box-align: center;
　　-ms-flex-align: center;
　　-webkit-align-items: center;
　　align-items: center;
　　-webkit-box-pack: center;
　　-moz-box-pack: center;
　　-ms-flex-pack: center;
　　-webkit-justify-content: center;
　　justify-content: center;
}

對比：方法二的技巧會高些，但是方法一的兼容性更好


 

移動端垂直居中對齊