移动端垂直居中对齐

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