1、利用弹性盒子
将父元素设置为display:flex;
通过：
?justify-content: center;
?align-items: center;
来设置元素的垂直水平居中
2、将元素转化为表格的形式
父元素设置：
?display: table-cell;
?vertical-align: middle;
?text-align: center;
子元素需设置：
display: inline-block;
?vertical-align: middle;//消除行内块元素三像素问题
3、利用绝对定位
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
4、利用translate
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
子元素的宽高自己设置
5、利用 margin-top: ;和margin-left: ;
将父元素设置为相对定位
position:relative;
子元素设置绝对定位
position: absolute;
top:50%;
left:50%;
margin-top:-(自身高度的一半）?;
margin-left:-（自身宽度的一半）?;
例：
.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;