html - Div以堆叠为中心水平对齐

我正在使用bootstrap3，而我想要达到的目标如下：

我的div宽度为100％

.bigdiv { width: 100% }

在该bigdiv中，我想放置4个小div。具有相同的宽度，但其中之一具有不同的高度。

我希望这4个div必须在.bigdiv div中居中对齐（水平）。但是，如果我调整窗口的大小，则它们应向下流动并相互堆叠，但仍应居中对齐。为了流畅地调整窗口大小，我尝试了float:left，但这并不能给出所需的视图。

在调整大小前后，我很难将这些小div保留在中心。请查看所附图片，说明可能的情况


任何帮助，将不胜感激。

最佳答案

这可以通过在子级中使用display: inline-block并在父级中使用text-align:center轻松实现：

的HTML

<div class="bigdiv">
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
</div>

的CSS

.bigdiv {
    text-align:center;
}

.smalldiv{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
}

.smalldiv:nth-child(3){
    height: 200px;
}

Demo fiddle