引用来自 https://segmentfault.com/q/1010000004615149
1.最简单的flex
布局,外层容器加上如下样式即可
display: flex;
justify-content: center;
align-items: center;
2.利用table-cell
外层容器
display:table-cell;
text-align:center;
vertical-align:middle;
内部元素
vertical-align:middle;
display:inline-block;
3.使用CSS3 transform
外层容器
display:relative
内部元素
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;