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%)
}