分成 块级元素 和 行内元素 进行总结
块级元素
flex布局：
具体的做法就是把父元素的属性： jusity-content(主轴对齐方式) 和 align-items(交叉轴单行对齐) 的值设置为 center
效果图：
Css代码：
#warp{
width:100%;
height:400px;
background-color:antiquewhite;
display:flex;
/* 主轴的对齐方式 */
justify-content:center;
/* 交叉轴上的单行对齐 */
align-items:center;
}
.center{
width:160px;
height:220px;
background-color:azure;
text-align:center;
}
.centerspan{
line-height:220px;
}
Html代码：
<divid="warp">
<divclass="center">
<span>实现水平垂直居中</span>
</div>
</div>
绝对定位（position: absolute）+ 负margin（这种方式需要知道元素的宽高）：
效果图：
Css代码：
.center{
width:400px;
height:200px;
background-color:beige;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
text-align:center;
}
.centerspan{
line-height:200px;
}
Html代码：
<divclass="center">
<span>水平垂直居中</span>
</div>
绝对定位（position: absolute）+ transform: translate()属性：
效果图：
代码：
.center{
width:380px;
height:400px;
background-color:#ccc;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
总结：
其实后面两种原理是相同的，通过绝对定位设置top和left为50%之后，再考虑处理元素自身的宽高；区别是负margin的方式需要知道具体的值才能设置，而transform: translate()设置百分比就可以，不需要知道具体的值
其他：
如果只需要水平居中：给对应的块级元素设置 margin: 0 auto; 即可
行内元素
1、在父元素上设置：text-align: center; 实现水平居中；设置元素的 line-height 的值等于父元素的 height 的值实现垂直居中，这应该是我们平时用的比较多的一种
2、在父元素上设置：text-align: center; 实现水平居中；再给父元素设置 display: table; 行内元素设置 display: table-cell; vertical-align: middle; 实现垂直居中
效果图：
Css代码：
.warp{
display:table;
width:200px;
height:300px;
background-color:blanchedalmond;
text-align:center;
}
.warpspan{
display:table-cell;
vertical-align:middle;
}
Html代码：
<divclass="warp">
<span>设置元素水平垂直居中</span>
</div>
3、给行内元素一个没有宽高的父元素，利用 flex 布局使其父元素水平垂直居中即可
效果图：
Css代码：
*{margin:0;padding:0;list-style:none;}
.container{
margin:100px00100px;
width:400px;
height:400px;
background-color:blanchedalmond;
display:flex;
justify-content:center;
align-items:center;
}
.center{
/* padding: 10px; */
background-color:#ccc;
}
Html代码：
<divclass="container">
<divclass="center">
<span>元素水平垂直居中</span>
</div>
</div>
