首页 > 代码库 > 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居中布局(水平居中和垂直居中)