1、多块级元素水平居中
（1）利用inline-block
通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
.container {
padding: 8px;
text-align: center;
border: 2px solid red;
}
.box {
padding: 8px;
width: 100px;
margin: 0 8px;
color: #333;
border: 1px solid red;
display: inline-block;
}
<div class="container">
<div class="box">
居中-inline-block
</div>
<div class="box">
居中-inline-block
</div>
<div class="box">
多块级元素水平居中-inline-block
</div>
</div>
可以看到：
（2）利用弹性布局（flex）
弹性布局中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
.container {
margin-bottom: 20px;
padding: 8px;
display: flex;
justify-content: center;
border: 2px solid red;
}
.box {
padding: 8px;
width: 100px;
margin: 0 8px;
color: #333;
border: 1px solid red;
}
<div class="container">
<div class="box">
居中-flex
</div>
<div class="box">
居中-flex
</div>
<div class="box">
多块级元素水平居中-flex
</div>
</div>
可以看到：
2、子元素垂直居中
（1）利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。
.container {
margin-bottom: 20px;
display: table;
width: 100%;
height: 140px;
border: 2px solid red;
}
.box {
display: table-cell;
vertical-align: middle;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（2）利用弹性布局（flex）
弹性布局中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
.container {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
color: #333;
border: 2px solid red;
}
.box3 {
margin: 0;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（3）利用伪元素
在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
.container5 {
position: relative;
border: 2px solid red;
margin-bottom: 20px;
height: 100px;
}
.container5::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.box5 {
display: inline-block;
vertical-align: middle;
width: 100px;
padding: 8px;
color: #333;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（4）利用transform属性
可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
.container {
height: 100px;
position: relative;
border: 2px solid red;
}
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #333;
padding: 8px;
margin: 0;
width: 100px;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
3、水平垂直居中
（1）固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半，使元素水平垂直居中。
.container {
margin-bottom: 20px;
height: 100px;
position: relative;
border: 2px solid red;
}
.box {
width: 200px;
height: 40px;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -110px;
color: #333;
border: 1px solid red;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（2）未知宽高元素水平垂直居中
在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
.container {
margin-bottom: 20px;
height: 100px;
position: relative;
border: 2px solid red;
}
.box {
padding: 20px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
border: 1px solid red;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（3）利用flex布局垂直居中
弹性布局中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
.container {
margin-bottom: 20px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid red;
}
.box {
padding: 20px;
border: 1px solid red;
color: #333;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
（4）利用grid布局
利用grid实现水平垂直居中。
.container {
margin-bottom: 20px;
height: 100px;
display: grid;
align-items:center;
border: 2px solid red;
}
.box {
margin: auto;
padding: 20px;
width: 100px;
color: #333;
border: 1px solid red;
}
<div class="container">
<p class="box">元素垂直居中</p>
</div>
可以看到：
参考文献：https://cloud.tencent.com/developer/article/1115615
