水平居中：
1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)（比如文本元素或者a链接）
①可以使用text-align:center
固定宽度的块级元素
①使用margin:0 auto实现水平居中
②绝对定位，left:50%,margin-left:-1/2元素宽度
垂直居中：
1.elements的display属性为inline或者inline-*(inline-block,inline-table,inline-flex等)（比如文本元素或者a链接）
单行：①使用padding-top和padding-bottm相同值
②使用line-height，white-space:nowrap
③使用vertical-align:middle
多行：
2.块级元素
固定高度：①绝对定位，top:50%,margin-top:-1/2元素高度
高度不固定：①绝对定位，top:50%,translateY(-50%)
flex布局：display:flex;flex-direction:column;justify-content:center;
原文：http://www.cnblogs.com/walk-on-the-way/p/5743576.html