用css实现水平居中，垂直居中

给父元素添加一个相对定位position: relative;，然后给子元素添加这个css样式

    .center{
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    text-align: center;
    }
  
有个缺点就是用定位后，如果你的头部也是用定位，那么用了这个定位后。你查看内容的时候，内容滚到头部会显示在头部上面。




第二种方法：给父元素的类添加这个就可以实现垂直居中和水平居中了
    display: flex;
    align-items: center;      //垂直居中
    justify-content: center;   //水平居中