1、Line-height
适用情景：单行文字（垂直居中）
原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。
html：
divclass="example"Loremipsam./div
css：
.example{
width:px;
background:#afddf3;
line-height:50px;
}
2、Line-height+inline-block
原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。
由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size：0来消除，从而达到完美的垂直居中。
css：
.example2{
width:px;
border:1pxsolid#dcdcdc;
line-height:px;
font-size:0;
}
.example2.con{
display:inline-block;
line-height:2;
vertical-align:middle;
width:px;
font-size:15px;
background:#afddf3;
}
3、:before+inline-block
原理：:before伪类元素搭配inline-block属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度。
我们将利用:before伪类元素设定为%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了。
此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size:0，子元素font-size:15px即可。
CSS:
.example3{
margin-top:10px;
width:px;
height:px;
font-size:0;
border:1pxsolid#dcdcdc;
}
.example3::before{
content:";
display:inline-block;
height:%;
width:0;
vertical-align:middle;
}
.example.con{
width:px;
font-size:15px;
background:#afddf3;
display:inline-block;
vertical-align:middle;
}
4、table+margin
适用情景：单对象（水平居中）
原理：将子元素设置块级表格，再设置水平居中。
CSS:
.example4{
margin-top:10px;
width:px;
height:px;
font-size:0;
border:1pxsolid#dcdcdc;
}
.example.con{
display:table;
margin:0auto;
width:px;
font-size:15px;
background:#afddf3;
}
5、table+table-cell+vertical-align:middle
适用情景：多对象（垂直居中）
html:
divclass="exampleexample5"
divclass="con"
超级好用超级放心
ahref="