CSS实现水平 垂直居中

1、flex布局方法：
  在父元素中添加： 
   display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中

2、给父元素添加 
    position:relative;
     给子元素添加
    position:absolute;
    top:50%;
    left: 50%;
    如果已知子元素宽高
        margin:-width/2 0 0 -height/2;  //自己计算一下
    如果未知子元素宽高
        transform: translatte(-50%,-50%);