首页 > 代码库 > CSS居中布局(水平居中和垂直居中)

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;}

 

CSS居中布局(水平居中和垂直居中)