css - 在 div 中以绝对位置居中两个容器

Question

使用 CSS，我想将一个 div 中的两个“框”水平居中。盒子是绝对定位的。

这是 JSFiddle:http://jsfiddle.net/p4sA3/8/

如果不使用特定宽度，我如何实现这一目标？

HTML:

<button id="change">Change</button>
<div id="total-wrap">
    <div id="hello-wrap" class="bunch">
        <div id="box"> 
            <p> Hello, this is text1 </p>
        </div>
        <div id="box">
            <p> Hello, this is text2 </p>
        </div>
    </div>
    <div id="goodbye-wrap" class="bunch">
        <div id="box"> 
            <p> Goodbye, this is text1 </p>
        </div>
        <div id="box">
            <p> Goodbye, this is text2 </p>
        </div>
    </div>
</div>

CSS:

#total-wrap {
    border:1px solid #000;
    height:500px;
}
#box {
    position:relative;
    display:inline-block;
    width:300px;
    height:100px;
    background-color:yellow;
    margin:10px;
}
.bunch {
    position: absolute;
    text-align:center;
}

Answer 1

我会用 left:0; 和 right:0 来做，因为它们是绝对定位的。

演示 http://jsfiddle.net/kevinPHPkevin/p4sA3/19/

.bunch {
    position: absolute;
    text-align:center;
    left:0;
    right:0;
}