一. 元素垂直居中 的10种方法
当元素宽高固定时：
三种方法（都是用了脱离文档流的定位）：
absolute + 负margin
absolute + margin auto
absolute + calc
方法一：absolute + margin 负值
100px;
height: 200px;
left : 50%;
top: 50%;
margin-left：-50px;
margin-top: -100px;
方法二(宽高固定与不固定都可以用)：
absolute + margin auto
width : 100px;(50%)
height: 200px;(50%)
position ：absolute;
left:0; top:0; right:0; bottom:0;
margin:auto;
方法三：
absooute + calc
100px;
height:200px;
position:absolute;
left:calc(50% - 50px);
top:calc( 50% - 100px);
当元素宽高不固定时：
方法四： position + translate
.fatherDiv{
position:relative;
height:
}
.targetDiv{
position: absolute;
left 50%;
top: 50%;
tansform:translate(-50%, -50%);
}
方法五：
line-hieght
.parentDiv{
line-height: 300px;
text-align:center;
font-size: 0;
}
.targetDiv{
font-size：16px;
line-height:initial;
text-align:left;
display: inline-block;
vertical-align:middle;
}
方法六：
table
利用表格的自带的垂直居中属性，将DIv放在td中，再加上text-align ：center即可，但是缺点是会有冗余代码，也不是正确用法。
方法七：
display:table-cell;
.parentDiv{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.targetDiv{
display:inline-block;
}
方法八：
优雅的 display :flex;
.parentDiv{
display : flex;
justify-content: center;
align-items: center;
}
方法九：
.parentDiv{
display:grid;
}
.targetDiv{
justify-self:center;
algin-self: center;
}