百分比宽度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;

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