【CSS布局】水平、垂直居中的实现

1.垂直居中的实现

• 弹性布局

.warp{
    display: flex;
    align-items: center;  /*/垂直居中*/
    width: 100%;    /*/宽高必设置*/
    height: 100%;
}

• 使用margin-top

.warp{
    margin: 0 auto; /*水平居中*/
    position: relative;
    top: 50%; /*偏移*/
    margin-top: -150px; 
}

• 除了可以使用margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。------但是这个方法不太适用于小程序的布局，小程序使用这个方法布局后，手机端显示正常，但是电脑端登录小程序就会错位。使用上面的方法更保险。

.warp{
position: relative;
top: 50%;
transform: translateY(-50%)
}