页面布局-水平居中，垂直居中

一、没有设置之前效果及代码如下：

设置之后效果：

1、水平居中

1）inline-block + text-align

说明：只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的

2）table+margin

支持ie8+，Firefox，chrome；ie7及以下不支持；

3）absolute+transeform

ie8及以下都不兼容

4）flex+justify-content

ie10及以上 主流浏览器 兼容，ie9及以下都不兼容；

2、垂直居中

1）table-ceil+vertical-align

ie8及以上兼容，主流浏览器

2)absolute+transform

兼容性好

3）flex align-items

兼容性差 ，支持ie10及以上 ，主流浏览器