元素居中
对于当行文字居中，比较简单，设置text-align:center和text-height为盒子高度即可
对于父元素中子元素居中，要实现的话有以下几个方法
方法1：利用定位+margin：auto
<style>
.father {
width: 500px;
height: 300px;
border: 1px solid #0a3b98;
position: relative;
}
.son {
width: 100px;
height: 40px;
background: #f0a238;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
}
</style>
<div class="father">
<div class="son"></div>
</div>父元素中relative相对定位，子元素absolute绝对定位，并设置top，left，right，bottom为0，并设置margin:auto
方法2：利用定位+margin：负值
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并设置margin-left和margin-top为盒子大小的一半-50px（这种情况需要知道盒子大小）
方法3：利用定位+transform
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>父元素中relative相对定位，子元素absolute绝对定位，并设置top，left为50%，并使用transform移动-50%，transform: translate(-50%,-50%); 此方法不需要知道盒子大小
方法4：利用flex
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>使用flex布局，设置justify-content: center; 水平居中 align-items: center;设置垂直居中
