Css 将两个容器居中，绝对位置在一个div内

使用CSS，我想在一个div中水平居中放置两个“框”。这些框是绝对定位的

以下是JSFIDLE：

如果不使用特定的宽度，我将如何实现这一点

HTML:

---

解决方案：

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

---

解决方案：

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

框1
框2
#包裹{
背景：#e7e7e7；
填充：40px；
文本对齐：居中；
宽度：自动；
}
#左，#右{
背景：黄色；
显示：内联块；
填充：20px；
}

框1
框2
#包裹{
背景：#e7e7e7；
填充：40px；
文本对齐：居中；
宽度：自动；
}
#左，#右{
背景：黄色；
显示：内联块；
填充：20px；
}

这就是你想要的吗

#box {
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    background-color:yellow;
    margin:10px;
}

演示：

问题是，只要宽度之和超过容器，第二个div就会位于第一个div之下

在另一个演示中，我没有使用宽度：

这是您想要的吗

#box {
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    background-color:yellow;
    margin:10px;
}

演示：

问题是，只要宽度之和超过容器，第二个div就会位于第一个div之下

---

在另一个演示中，如果要使用jQuery，我没有使用width:

：

---

如果要使用jQuery：

---

我会用

left:0

和

右侧：0

，因为它们处于绝对位置

演示

---

我会用

left:0

和

右侧：0

，因为它们处于绝对位置

演示

---

@对不起，我弄错了。我会改正的that@BradleyMitchell对不起，我弄错了。我将纠正这一点，您可以使用jQuery将绝对定位的元素居中吗？如果您要绝对定位它们，您需要特定的宽度btw:id必须是唯一的使用类，而不是

=>

您可以使用jQuery将绝对定位的元素居中吗？如果您要绝对定位它们，您需要特定宽度btw:id必须是唯一的使用类，而不是

=>

“如果不使用特定宽度，我将如何实现此目标？”只需从样式中删除宽度。“如果不使用特定宽度，我将如何实现此目标？”只需从样式中删除宽度。

#box {
    position:relative;
    display:inline-block;
    width:100px;
    height:100px;
    background-color:yellow;
    margin:10px;
}

keepCentered = function() { 
    $('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
    $('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);

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