试图在包装器的中间将每组2个div分别居中(Trying to center 2 groups of 2 divs each at the middle of a wrapper)

我有四个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> 
  
 
I have four divs(all same sizes) i have grouped them into to blocks of 2 with classes blocka both contained in an inner container body-content float all the blocks to the left so when my page width changes,these the blocks(of 2) aligned under each other. I am trying to get now is that those divs sit right at the middle of the main container. 
 
Everything response well. All i need it the class body content sit at the middle of main while blocka all center themselves in the middle of 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> 
  
 
I don't really understand so please clarify.
 
Here you go, the body-content is sitting in the middle of main, while blocka is sitting in the middle of body-content. You didn't said where will the main be position so I left it in the right-side.
 
Colors are for visualization and I reduced the body-content's width to see the main behind it
 
 
 
  
  
.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>