div盒子水平居中的4种方法

初始HTML代码如下：

<div class="father">
	<div class="son"></div>
</div>

初始CSS代码如下：

.father {
	width: 300px;
	height: 300px;
	background-color: pink;
	margin: 20px auto;
}
.son {
	width: 100px;
	height: 100px;
	background-color: blue;
}

初始效果图如下：

水平居中方法如下：

1. 外边距auto

.son {
	margin: 0 auto; /*外边距auto*/
}

2. 外边距控制水平方向位置

.son {
	margin-left: 100px;/*外边距控制水平方向位置*/
}

3. 定位

.father {
	position: relative; /*定位*/
}
.son {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);  /*定位*/
}

4. 行内块元素

.father {
	text-align: center; /*行内块元素*/
}
.son {
	display: inline-block; /*行内块元素*/
}

实现效果图如下：