1、Line-height
适用情景：单行文字（垂直居中）
原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。
.example{width:400px;background:#afddf3;line-height:50px;}
2、absolute + margin 负值
原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。
.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;top:50%;height:80px;margin-top: -40px;width:300px;font-size:15px;background:#afddf3;}
3、absolute + margin auto
原理：当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin: auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。
.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;top:0;bottom:0;left:0;right:0;margin: auto;height:80px;width:300px;font-size:15px;background:#afddf3;}
4、absolute + translate
原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。
.example{position: relative;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{position: absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-size:15px;background:#afddf3;}
5、Flex + align-items
适用情景：多行文字（垂直居中）
原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS。
.example{display: flex;align-items: center;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{font-size:15px;background:#afddf3;}
6、Flex + justify-content
适用情景：多行文字（水平居中）
原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS。
.example{display: flex;justify-content: center;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{height:80px;font-size:15px;background:#afddf3;}
7、Flex + :before + flex-grow
适用情景：多行文字（垂直居中）
原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS。
.example{display: flex;flex-direction: column;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example:before{content:'';flex-grow: .5;}.example.con{font-size:15px;background:#afddf3;}
8、Flex + margin
.example1display: flex;margin-top:10px;width:400px;height:150px;font-size:0;border:1pxsolid#dcdcdc;}.example.con{margin: auto;width:300px;font-size:15px;background:#afddf3;}
