一.水平居中
1.使用inline-block和text-align实现
.parent{text-align: center;}
.child{display: inline-block;}
2.使用width和margin实现
.child{width:200px;margin:0 auto;
3.使用display和margin实现
.child{display:table;margin:0 auto;}
4.使用绝对定位实现
.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(-50%);}
5.使用flex
.parent{display: flex;}
.child{margin: 0 auto;}
二 垂直居中
http://caibaojian.com/img-vertical-middle.html