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

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

.center{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}

有个缺点就是用定位后，如果你的头部也是用定位，那么用了这个定位后。你查看内容的时候，内容滚到头部会显示在头部上面。

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