css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了(特想找个地洞钻进去)。据我所知，在CSS中至少有五种实现居中的方法。
1.使用text-align水平居中
这种方案没有使图片垂直居中：你需要给
添加 padding 或者给内容添加 margin-top和 margin-bottom使容器与内容之间有一定的距离。
2.使用 margin: auto 居中
这种方式实现水平居中和上面使用text-align的方法有相同局限性。
3.使用table-cell居中
使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。
4.使用absolute定位居中
这种方案有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height：
5.使用translate居中
Chris Coiyer 提出了一个使用 CSS transforms 的新方案。 同样支持水平居中和垂直居中。
