Dom结构：
<div class="box">
<div class="inner">
123
</div>
</div>
1， 伪元素 加 vertical-align
.box {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.box:before{
content: '';
height: 100%;
width:;
display: inline-block;
vertical-align: middle;
}
.inner{
display: inline-block;
}
2， table -ceil
.box {
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
3， flex
.box {
width: 300px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
4， transform
.box {
width: 300px;
height: 300px;
border: 1px solid red;
position:relative;
}
.inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5， absolute + margin：auto （子元素要设置宽高）
.box {
width: 300px;
height: 300px;
border: 1px solid red;
position:relative;
}
.inner{
position: absolute;
top:;
left:;
right:;
bottom:;
width: 100px;
height: 100px;
margin: auto;
}
6， flex + margin：auto
.box {
width: 300px;
height: 300px;
border: 1px solid red;
display: flex;
}
.inner{
margin: auto;
}