1、绝对定位，四个方向为0（子元素可以是块级元素也可以是行内元素）
.parent{ position:relative}
.child{
margin:auto;
height:100px;
width:100px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
1（1）已知子元素宽高
.parent{ position:relative;}
.child{
width:100px;
height:100px;
position:absolute;
top:50% ;
left:50%;
margin:-50px 0 0 -50px;
}
2、绝对定位+transform
.parent{ position:relative; }
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
transform-style:preserve-3d;/*变换后修复元素模糊*/
}
2（2）calc方式
.parent{position: relative;}
.child{
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 50px);
width: 100px;
height: 60px;
}
3、flex布局方式
.parent{
display:flex;
justify-content:center;/*水平居中*/
align-items:center;/*垂直居中*/
}
4、table写法(被居中元素为inline或inline-block)
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
}
水平居中
对于行内元素(inline)：text-align: center;
对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto
对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局
垂直居中
对于行内元素(inline)
单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等
多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素
对于块级元素(block)：下面前两种方案，父元素需使用相对布局
已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度
未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
使用 Flexbox：选择方向，justify-content: center；
PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex
