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

本方法也兼容固定宽度的

HTML代码如下：

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;




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