一、没有设置之前效果及代码如下:
设置之后效果:
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及以上 ,主流浏览器