html - 尝试在包装器的中间居中放置2组，每组2个div

我有四个div（所有大小均相同），我将它们分为2个类，每个类均包含在一个blocka类中，它们都包含在一个内部容器中body-content将所有块向左浮动，所以当我的页面宽度发生变化时，这些块（ 2）彼此对齐。
我现在想要得到的是那些div位于main容器的中间。

一切都反应良好。我所需要的所有课程body content坐在main的中间，而blocka都将自己居中在body-content的中间

.main {
  max-width: 100%;
  margin-left: 240px;
  background-color: ;
}

.body-content {
  background-color: white;
  margin: 0 auto;
  width: 95%;
  padding: 15px;
  border: 1px solid grey;
  height: 100px;
}

.blocka {
  float: left;
  margin: 0 auto;
}

<div class="main">

  <div class="body-content">
    <div class="blocka">
      <div class="body-content-items">Add All</div>
      <div class="body-content-items">Add All</div>
    </div>
    <div class="blocka">
      <div class="body-content-items">Add All</div>
      <div class="body-content-items">Add All</div>
    </div>
  </div>
</div>

最佳答案

我不太了解，请澄清。

在这里，body-content坐在main的中间，而blocka坐在body-content的中间。您没有说main的位置，所以我将其放在右侧。

颜色用于可视化，我减小了body-content的宽度以查看其后面的main

.main {
  max-width: 80%;
  margin: 0 auto;
  background-color: red;
}

.body-content {
  background-color: blue;
  margin: 0 auto;
  width: 50%;
  padding: 15px;
  border: 1px solid grey;
  height: 100px;
  text-align:center;
}

<div class="main">

  <div class="body-content">
    <div class="blocka">
      <div class="body-content-items">Add All</div>
      <div class="body-content-items">Add All</div>
    </div>
    <div class="blocka">
      <div class="body-content-items">Add All</div>
      <div class="body-content-items">Add All</div>
    </div>
  </div>
</div>

关于html - 尝试在包装器的中间居中放置2组，每组2个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44366687/