css居中的几种方法_css之div盒子居中常用方法大全

大家都知道&＃xff0c;不管是在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况&＃xff0c;在这里总结了几种常用的居中方法&＃xff1a;

以下例子中使用的基础结构如下

1、绝对定位法&＃xff08;个人感觉最好用&＃xff09;

这个方法就是利用绝对定位&＃xff0c;使它的top、left、right、bottom都为0就可以实现居中

这个方法用在垂直居中都可以&＃xff0c;就使它的上下为 0 就可以实现垂直居中

2、负margin居中&＃xff08;传统方法&＃xff09;

利用负的margin来进行居中&＃xff0c;需要知道固定宽高&＃xff0c;限制比较大。

3、margin固定宽高居中

这种定位方法&＃xff0c;得需要知道宽高&＃xff0c;不灵活。

4、flex居中

5、transform居中

这种唯一的缺点就是 IE9 以下不支持

6、table-cell居中&＃xff08;最不常用&＃xff09;

这种的话就是将父元素转换成表格单元格显示&＃xff0c;然后使用垂直居中实现

7、不确定宽高居中

这种较为灵活。只需要保证left和right的百分数一样就可以实现水平居中&＃xff0c;保证top和bottom的百分数一样就可以实现垂直居中。

大家可以参考这个视频