移动端垂直居中对齐

标签：center   lex   利用   居中   for   position   translate   osi   flexbox   

方法一：利用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;
}

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

移动端垂直居中对齐

标签：center   lex   利用   居中   for   position   translate   osi   flexbox   

原文地址：http://www.cnblogs.com/vicky24k/p/6855605.html