下面是水平和垂直居中的方法：

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+