Html Div水平对齐，居中堆叠

我正在使用bootstrap3，我正在努力实现以下目标：

我有一个100%宽的大div

.bigdiv { width: 100% }

在那个大div中，我想放4个小div。宽度相同，但其中一个高度不同

我希望这4个div必须在.bigdivdiv中居中对齐（水平）。但是，如果我调整窗口大小，则它们应该向下流动并相互堆叠，但仍然在中心对齐。为了在调整窗口大小时流畅地堆叠，我尝试了

float:left

，但这并没有提供所需的视图

在调整大小之前和之后，我很难将这些小div保持在中间。请参阅所附图片，说明可能的情况

---

任何帮助都将不胜感激。

请查看有关网格的引导文档。。。若要在bigdiv中居中放置div，必须添加一个类为：.container的div，并在其中添加一个类为row的div，然后添加cols。。。像这样：

<div class="bigdiv">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Col 1</div>
            <div class="col-md-3">Col 2</div>
            <div class="col-md-3">Col 3</div>
            <div class="col-md-3">Col 4</div>
        </div>
    </div>
</div>

第1列
第2列
第3列
第4列

记住，bootstrap使用12列网格，因此根据需要替换col-lg-3中的数字

---

演示：

这可以通过在子对象中使用

显示：内联块

和在父对象中使用

文本对齐：居中

轻松实现：

HTML

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

---

您能分享您当前的尝试吗？最好是在a中，您在这个布局中使用引导类吗？谢谢koala_dev。没想到会这么容易。你的解决方案非常简洁。考拉·德夫我在框中放了一些内容，并使文本在小框中左对齐，然后所有小div移到顶部，而它先前一直在底部。如何让它们保持在底部。@JVK将

vertical align:bottom

添加到小框中：

.bigdiv {
    text-align:center;
}

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

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