console
1.line-height和text-align
2.display:flex;
align-item:center;
justify-content:center;
3.position:absolute;
top:50%;
left:50%;
margin-left:-50px;(假设已知宽度为100px)
margin-top:-50px;(假设已知高度为100px)
4.position:absolute;
top:50%;
left:50%;
transform:translate(-50% , -50%)(假设不知道宽高的情况下，translate是相对于自身的)
5.水平居中：
width:100px;
height:100px;
margin:0 auto;
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div>
#div1{
width:500px;
height:300px;
background:white;
position:relative;
}
#div2{
width:200px;
height:100px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
#div3{
width:500px;
height:300px;
background:blue;
}
#div4{
width:200px;
height:100px;
margin:0 auto;
background:white;
}