css之div盒子居中常用方法大全

css之div盒子居中常用方法大全

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

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

转自：css之div盒子居中常用方法大全 - 香芋妹妹的文章 - 知乎
https://zhuanlan.zhihu.com/p/160929003