下面是水平和垂直居中的方法：
1.Flex 方案
2.Grid 方案
3.absolute + transform
4.absolute + 负 margin
5.absolute + margin: auto
Flex 方案
justify-content,align-items
代码链接：http://js.jirengu.com/gasekameza/9/edit?html,css,output
flex+margin:auto
代码链接：http://js.jirengu.com/gasekameza/10/edit?html,css,output
目前在移动端已经完全可以使用 Flex 布局了，PC 端需要看自己业务的兼容性情况。
优点：不需要固定居中元素的宽高。
兼容性：
IE 10+, Chrome 4+, Firefox 2+
Android 2.3+, iOS 6+
Grid 方案
justify-content,align-items
代码链接：http://js.jirengu.com/gasekameza/12/edit?html,css,output
grid+margin:auto
代码链接：http://js.jirengu.com/gasekameza/11/edit?html,css,output
优点：不需要固定居中元素的宽高。
兼容性：
IE 10+, Chrome 57+, Firefox 52+
Android 6+, iOS 10.3+
absolute + transform
CSS3 中新增的 transform，其 translate 属性是根据元素自身计算的。例如：设置 transform: translateX(-50%);，元素会向左偏移自身宽度的一半。根据这一特性，很容易实现元素的居中。
代码链接：http://js.jirengu.com/gasekameza/14/edit?html,css,output
优点：不需要固定居中元素的宽高。
absolute + 负 margin
代码链接：http://js.jirengu.com/zezutemika/1/edit?html,css,output
缺点：需要固定居中元素的宽高。
兼容性：
IE 6+, Chrome 4+, Firefox 2+
Android 2.3+, iOS 6+
absolute + margin: auto
代码链接：http://js.jirengu.com/ficutujada/1/edit?html,css,output
缺点：需要固定居中元素的宽高，否则其宽高会被设为 100%
兼容性：
IE 6+, Chrome 4+, Firefox 2+
Android 2.3+, iOS 6+
