CSS居中布局（水平居中和垂直居中）

一、水平居中的四种方法（父容器和子容器宽度均不固定）

1、inline-block + text-align

子容器：{display:inline-block}

父容器：{text-align:center}

缺点：不兼容IE6、7，子容器内部的内容也会居中

兼容办法：子容器：{zoom:1;display:inline-block}//模拟inline-block

2、table + margin

子容器：{display:table; margin:0 auto;}//display:table使子容器宽度随着内容走

优点：只用处理子容器

缺点：不兼容IE6、7

兼容办法：将html结构改成<table></table>

3、absolute + transform

父容器：{position:relative}

子容器：{position:absolute; left:50%;transform:translateX(-50%)}//子容器往左移动了自己宽度的50%

优点：子容器不影响其他子元素

缺点：transform是CSS3的样式，不兼容IE6、7、8，可能需要给不同浏览器加不同的私有前缀

4、flex + justify-content

(1) 父元素：{dispaly:flex;justify-content:center;}

优点：不需要设置子元素

(2) 父元素：{dispaly:flex;} 子元素：{margin:0 auto}

缺点：只有高版本浏览器才兼容flex和align-items

二、垂直居中的三种方法（父容器和子容器宽度均不固定）

1、table-cell + vertical-align

父容器：{display:table-cell;vertical-align:middle;}

优点：只用处理父容器

缺点：不兼容IE6、7

兼容办法：将html结构改成<table></table>

2、absolute + transform

父容器：{position:relative}

子容器：{position:absolute;top:50%;transform:transformY(-50%)}

优点：子容器不影响其他子元素

缺点：transform是CSS3的样式，不兼容IE6、7、8，可能需要给不同浏览器加不同的私有前缀

3、flex + align-items

父容器：{display:flex;align-items:center;}//当时flex时父容器默认的align-items是stretch

缺点：只有高版本浏览器才兼容flex和align-items

二、水平和垂直都居中的三种方法（父容器和子容器宽度均不固定）

1、inline-block + text-align + table-cell + vertical-align

子容器：{display:inline-block}

父容器：{display:table-cell;text-align:center;vertical-align:middle;}

2、absolute + transform

父容器：{position:relative}

子容器：{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3、flex + justify-content + align-items

 

父容器：{display:flex;justify-content:center;align-items:center;}