position、table-cell、flex-box三种垂直（水平）居中技巧
position:
父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:该元素height*0.5的负值
margin-left:该元素width*0.5的负值
}
注：需要父元素和子元素都定义宽高
display:table-cell:
父元素{
display:table-cell;
vertical-align:middle;
}
子元素{
vertical-align:middle;
}
注：能够使大小不固定的元素实现垂直居中布局，除了常见的实现不同宽高的图片垂直居中，还能做到自适应两栏布局
另外table-cell还能自动使多个子元素等宽分布，不需要自己计算宽度
1、IE6/7不支持; 2、table-cell不支持margin属性（但支持padding）; 3、尽量不要和浮动/定位同时用，会破坏它的css属性。
flex-box:
父元素{
display:flex 行内元素用inline-flex
align-items:center;当主轴为水平方向(默认)
}
注：原理是使flex-box的子元素（伸缩项目）沿着侧轴方向（当默认flex-direction:row时，侧轴就是垂直方向）居中对齐。
使用flex-wrap，还可以使伸缩容器里的内容折叠显示
摘自博客园