absolute定位下的margin居中失效

[shaozj]

在绝对定位时，css样式中设置margin：0 auto；失效问题，例子如下：

.middle-div {
	width: 100px;
	height: 100px;
	position: absolute;
	margin: 0 auto;
}

如上的方式并不能实现元素的水平居中。而采用相对定位则可以：

.middle-div {
	width: 100px;
	height: 100px;
	position: relative;
	margin: 0 auto;
}

然而，absolute定位下，margin是可以工作的，例如

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

这样元素的确能相对父元素向右移动父元素宽度的50％。

一般对于absolute定位的元素，我们居中的方式为：

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

还有有趣的一点是，如下代码，也能实现absolute定位元素的水平居中：

.middle-div {
	width: 100px;
	height: 100px;
	positon: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}

这其中的原理，上网搜索了很多内容，但都没有讲清楚，后续将继续研究，今天暂且做个记录。