实现水平居中垂直居中的案例

参考链接：16种方法实现水平居中垂直居中（https://juejin.im/post/58f818bbb123db006233ab2a）

水平居中(X轴)

6) 使用CSS3中新增的transform属性, 子元素设置如下:

.son{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}

垂直居中(Y轴)

6) 使用CSS3中新增的transform属性, 子元素设置如下:

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

使用场景（持续更新。。。）

1）登录页面的登录框（目标效果：位于页面的中心处）

利用x6，y6实现

.login-box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 

转载于:https://www.cnblogs.com/runrunrun/p/11618046.html