html - 如何在div中居中放置一组div？

Question

我是 CSS 的新手，我对将一组 div 集中在一个 div 中感到很困惑。我想要什么:

div 2、3 和 4 应该在 div1 内居中。

我的方法:

.div1 {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.restofdivs {
    width: 470px;
    margin: 20px;
    min-height: 1px;
    float:center
}

结果是:3 个 div(2,3 和 4)一个在另一个之上...

问候，

Answer 1

这可以通过表格显示轻松完成:

.table-display {
  display: table;
  width: 100%;
}
.cell-display {
  display: table-cell;
}
.div1, .div2, .div3, .div4 {
  padding: 40px;
}
.div1 {
  background: #ABC;
}
.div2 {
  background: #DEF;
}
.div3 {
  background: #CAD;
}
.div4 {
  background: #FAD;
}

<div class="div1">
  <div class="table-display">
    <div class="cell-display div2"></div>
    <div class="cell-display">
      <div class="div3"></div>
      <div class="div4"></div>
    </div>
  </div>
</div>