前端水平垂直居中总结

方法1： 定位

代码：

.parent{

 position:relative;

} 

.child{

  position:absolute;

 top:50%;

 left:50%; 

  transform:translate(-50%,-50%);

}

通过对父元素的绝对定位，使子元素距离父元素顶部50%，左部50%的位置开始显示，然后再通过CSS3的移动使子元素向左向上移动50%的子元素宽度高度。

方法2：flex弹性布局

代码：

 .parent{

  display:flex;

  justify-content:center;

 align-items:center;

}