移动端垂直居中对齐

方法一:利用CSS3的transform:translate

.center{
    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-flex;
display:flex;
-webkit-justify-content:center;
justify-content:center;
-webkit-align-items:center;
align-items:center;
}

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

flex布局具体可以参考:http://caibaojian.com/flexbox-guide.html



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