CSS中盒子居中常用方法

1、绝对定位居中（最常用、好用）
2、flex居中
3、transform居中
4、不确定宽高居中（绝对定位百分数）

5、负margin居中（传统方法）
6、margin固定宽高居中

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

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

2、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;
}

3、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%);
}

4、不确定宽高居中（绝对定位百分数）

.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%;
	margin:auto;
}

5、负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;
}

6、margin固定宽高居中

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

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

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