css - 在包装器中间居中两个div

我有这个CSS问题:

<div id="wrap">
    <div id="left">I am div 1</div>
    <div id="right">I am div 2</div>
</div>

我正在尝试使“我是div 1我是div 2”在包装div内部居中。不确定如何解释。设计只用百分比，液体设计，我被困住了。

有任何想法吗？

最佳答案

如果我正确理解了您的问题，则该方法应该起作用:

#wrap {
    background: #e7e7e7;
    padding: 5%;
    text-align: center;
    width: 80%;
}

#left, #right {
     background: #ccc;
     display: inline-block;
     padding: 2%;
}

View Example

这将使两个div块在包装内并排居中。

编辑:2015 Flexbox解决方案

Flexbox现在得到了更广泛的支持，并且很可能是这种情况下的更好解决方案。上面的内联块方法伴随着一些怪癖，例如水平间距和垂直对齐问题。这是flexbox解决方案:

#wrap {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    padding: 5%;
    width: 80%;
}

#left, #right {
    background: #ccc;
    padding: 2%;
}

View Example

确保检查Can I Use以确认所支持的浏览器是否支持flexbox。

2019编辑:评论者MC9000提出我的示例没有以百分比回应，如原始问题所述。我已经更新了示例，以表明该方法适用于基于百分比的尺寸调整，就像基于像素的尺寸调整一样。

关于css - 在包装器中间居中两个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5834158/