child代表子元素，parent代表父元素
1:使用text-align和inline-block实现
.parent{text-align:center;}
.child{display:inline-block;}
2:使用左右自动
.child{200px;margin:0 auto;}(需要设置指定的宽度才有效)
3：table进行实现
.child{display:table;margin: 0 auto;}
4:使用flex布局来实现
.parent{display:flex;justify-content:center;}或者
.parent{display:flex;}
.child{margin: 0 auto;}
5:使用绝对定位来实现
.parent{position:relative;}
.child{position:absolute;left: 50%;transform:translate(-50%);}
垂直分布
1:使用vertical-align
vertical-align又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
/*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/ .parent{display:inline-block;vertical-align:middle;line-height:20px;}
2：使用绝对定位
.parent{position: relative;}
.child{position:absolute;top:50%;transition:translate(0,-50%);}
3:使用flex布局
.parent{display:flex;align-items:center;}
水平垂直全部居中
1：利用vertical-align,text-align,inline-block实现
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
2：利用绝对定位实现
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
注意：translate是值的百分比是相对于自己的宽高，而margin-top的百分比是相对于父元素的
3：利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
作者： GD_SeHun
链接：http://www.imooc.com/article/2235
来源：慕课网