绝对定位

用绝对定位，使它的top、left、right、bottom都为0就可以实现居中，水平居中和垂直居中均可实现

 

.box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

 

负margin

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

 

.box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

 

flex

 

.box {
	width: 200px;
	height: 200px;

	display: flex;
	justify-content: center;
	align-items: center;
}

.chl_box {
	width: 100px;
	height: 100px;
}

 

transform

IE9 以下不支持

 

.box {
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

 

table-cell（不常用）

将父元素转换成表格单元格显示，然后使用垂直居中实现

 

.box {
	display: table-cell;
	vertical-align: middle;
}

.chl_box {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

 

不确定宽高居中（定位）

使用定位百分比确定边距，从而确定宽高

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

 

.box {
	width: 200px;
	height: 200px;
	position: relative;
}

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

---

参考：
css之div盒子居中常用方法大全 - 风向决定发型哦的文章 - 知乎