借鉴文章：https://juejin.im/post/5b94d8965188255c5a0cdc02
真实以本篇为准，有遗漏，欢迎补充
1、水平居中
1.1、行内元素的水平居中（span、文字、图片、input）
父级 {
text-align: center;
}
1.2、块级元素水平居中：分情况
>> 有宽度的块级元素
本身 {
margin: 0 auto;
}
本身 { //推荐
margin-left: auto;
margin-right: auto;
}
>> 宽度不固定的元素：
方法一：定位+位移法
父级{position: relative;}
子级{
position: absolute;
left: 50%;
transform:translateX(-50%);
}
方法2: 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
position: relative;
left:-50%;}
}方法3：flex法
父级{
display: flex;
flex-direction: row;//设置主轴
justify-content: center;//主轴方向居中
}
2、垂直居中
2.1、行内元素（span、img、文字）垂直居中：
父级 {
height : 100px;
line-height: 100px;
}
2.2、块级元素：表格布局法
父级 {
display: table-cell;
vertical-align: middle;
}
3、水平垂直居中：
3.1：必须有宽度：定位法：上下左右为0，margin：auto
本身 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;
background: red;
}
3.2
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: red;
}
3.3 flex法：让元素在父级框里是水平垂直居中的
.fa{
display:flex;
flex-direction: row;//确定主轴
align-items: center;//交叉轴居中
justify-content: center;//主轴居中
border: 1px solid greenyellow;
}
3.4 grid方式
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}来源：oschina
链接：https://my.oschina.net/u/3763385/blog/2050281