固定div_css之div盒子居中常用方法大全

最新推荐文章于 2021-07-23 09:20:59 发布

Ben Franklin

最新推荐文章于 2021-07-23 09:20:59 发布

阅读量179

点赞数

文章标签：固定div

本文链接：https://blog.csdn.net/weixin_35101659/article/details/112621141

版权

本文汇总了CSS中让div盒子水平和垂直居中的多种方法，包括绝对定位法、负margin、margin固定宽高、flex布局、transform、table-cell布局以及适应不确定宽高的居中技巧，覆盖了不同场景下的居中需求。

摘要由CSDN通过智能技术生成

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

1、绝对定位居中（最常用、好用）
2、负margin居中（传统方法）
3、margin固定宽高居中
4、flex居中
5、transform居中
6、table-cell居中
7、不确定宽高居中（绝对定位百分数）

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

<div class="box">
	<div class="chl_box">		
	</div>
</div>

1、绝对定位法（个人感觉最好用）

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}
.chl_box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: #00FFFF;
}

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #00FFFF;
}

2、负margin居中（传统方法）

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	background: #00FFFF;
}

3、margin固定宽高居中

这种定位方法，得需要知道宽高，不灵活。

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
}

.chl_box {
	width: 100px;
	height: 100px;
	margin: 50px 50px;
	background: #00FFFF;
}

4、flex居中

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
}

5、transform居中

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

6、table-cell居中（最不常用）

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	display: table-cell;
	vertical-align: middle;
}

.chl_box {
	width: 100px;
	height: 100px;
	background: #00FFFF;
	margin: 0 auto;
}

7、不确定宽高居中

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

.box {
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	position: relative;
}

.chl_box {
	background: #00FFFF;
	position: absolute;
	left: 25%;
	right: 25%;
	top: 25%;
	bottom: 25%;
}

大家可以参考这个视频

知乎视频www.zhihu.com

https://www.bilibili.com/video/BV1mz411v7hR/?p=81www.bilibili.com