水平垂直居中

1.水平垂直居中的方法及其优缺点

页面结构：

         

第一种：利用transform实现水平垂直

.parent{position:relative;width:100%;height:500px;border:1px red solid;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;background:red}

第二种：利用定位实现水平垂直

.parent{position:relative;width:100%;height:500px;border:1px red solid;}

.child{position:absolute;top:50%;left:50%;margin:-50px -50px;width:100px;height:100px;background:red}

第三种：利用弹性布局水平垂直

.parent {position: relative;width: 100%;height: 500px;display: flex;align-items: center;

-webkit-align-items: center;justify-content: center;-webkit-justify-content: center;border: 1px red solid;}

.child{width:100px;height:100px;background: red;}

页面效果