Css 使用两个右浮动将一个Div居中

我这里有个小问题。我想把红色的div居中，让两个绿色的div向右浮动。右边的两个div似乎下降了

HTML

您好，现在更改html代码，并对css进行一些更改

Css

HTML

您好，现在更改html代码，并对css进行一些更改

Css

HTML

HTML

演示：

HTML

---

演示：

将右侧1和右侧2放在一个div中可能会让生活更轻松：@Passerby perfect。我怎么能让右边的两个花车挨在一起呢？把你的右边1和右边2放在一个div里可能会让生活更轻松：@passersperfect。我怎么能让右边的两个花车挨在一起？太好了！为什么溢出：隐藏在父级上，.headertop？@user1100603很抱歉删除溢出：隐藏；完美的为什么溢出：隐藏在父级上，.headertop？@user1100603很抱歉删除溢出：隐藏；

<div class="headertop">
 <div class="centerblock">Centered</div>
 <div class="right1">right 1</div>
 <div class="right2">right 2</div> 
</div>

.headertop {
 width:100%;
 height:30px;
 background:black;
}

.centerblock {
 color:white;
 text-align:center;
 background:red;
 width: 200px;
 margin: 0px auto;
}

.right1, .right2 {
 color:white;
 float:right; 
 width:100px;
 background:green;
}

  .headertop {
    width:100%;
    background:black;
    text-align:center;
}
.centerblock {
    color:white;
    text-align:center;
    background:red;
    width: 200px;
    margin:0 auto;
}
.right1, .right2{
    color:white;
    float:right;
    width:100px;
    background:green;
}

<div class="headertop">
    <div class="right1">right 1</div>  
    <div class="right2">right 2</div>
    <div class="centerblock">Centered</div>
</div>

<div class="headertop">
  <div class="centerblock">Centered</div>
  <div class="rights">
    <div class="right1">right 1</div>
    <div class="right2">right 2</div> 
 </div>
</div>

 .headertop {
  width:100%;
  height:30px;
  background:black;
  text-align:center;
  position:relative;
  }

 .centerblock {
  color:white;
  text-align:center;
  background:red;
  width: 200px;
  margin: 0 auto;
 }

.rights {
 position:absolute;
 right:0;
 top:0;
 width:100px;
}

.right1, .right2 {
 color:white;
 width:50px;
 background:green;
 float:left;
 }