怎么實現(xiàn)這種html布局

flex 或 box布局，三個全部居中對齊，然后label2 再transform:translate(0%,50%)

思路還是挺簡單的，前面?zhèn)z比較容易對齊，第三個用絕對定位，top：50%就可以搞定

<div class="wrap">
    <span class="lable1"></span>
    <input class="radio" type="radio">
    <span class="lable2"></span>
</div>

.wrap{
  position: relative;
  font-size: 20px;
  width: 500px;
  height: 50px;
  background: #ddd;
}
.lable1{
  background: #ccc;
  display: inline-block;
  width: 50px;
  height: 100%;
}
.radio{
    display: inline-block;
    line-height: 50px;
    height: 50px;
    margin: 0;
}
.lable2{
  position: absolute;
  background: #999;
  display: inline-block;
  width: 50px;
  height: 100%;
  top: 50%;
}

這不簡單嘛,讓label1跟icon中線對齊,然后讓laybel2往下偏移label1的高度的一半;