用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;   //水平居中