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、绝对定位法

 

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

 

2、负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居中

 

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