如何使用CSS 使1 div中心对齐和其他浮动

参见英文答案 > Center and right align flexbox elements                                    4个
我想让我的div2居中对齐,div3在右边.

我尝试使用文本对齐：中心为主div并使浮动向右到div3但它通过考虑主要div的剩余部分使其居中对齐.我已经给出了显示：inline-flex to main div

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

.main {
  display: block;
  position: relative;
  width:100%;
  text-align: center;
  border: 1px solid red;
}
.main .div1 {
  display: inline-block;
  border: 1px solid;
}
.main .div2 {
  float: right;
  border: 1px solid;
  display: inline-block;
}

<div class="main">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>