百分比宽度div如何水平居中

本方法也兼容固定宽度的

HTML代码如下：

<div id="box">
	<div id="container"></div>
</div>

CSS样式如下：

#box{
	position: relative;

}
#container{
	position: absolute;
	width:30%;
	height:100px;
	background: #ccc;
	left: 0;
	right: 0;
	margin:100px auto;
}

效果如图：

关键点在于：

需要水平居中元素的父元素需相对定位，本身则绝对定位，并给出

left: 0;
right: 0;
margin:100px auto;

其中margin:100px auto  也可以只写

margin-left:auto;
margin-right:auto;

————转载本文请注明出处