html - 垂直居中对齐一个div

Question

我想要我的红色矩形在数字中间，为此我添加了一个包装器 div ，样式为 display:table 和 box div 样式为 display:table-cell, vertical-align:middle。以下是我的html

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;">
  <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div>
  <div class="boxStatsContainer" style="float: left;">
    <div style="float: left; display:table">
      <div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div>
    </div>
    <div class="stats" style="font-size: 48px; float: left; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div>
  </div>
  <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div>
</div>

但是红框不在中间

Answer 1

你可以尝试使用display: flex; align-items: center 到你的 boxStatsContainer div 元素；

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;">
  <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div>
  <div class="boxStatsContainer" style="float: left; display: flex; align-items: center;">
    <div style="float: left; display:table">
      <div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div>
    </div>
    <div class="stats" style="font-size: 48px; float: left; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div>
  </div>
  <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div>
</div>