html - 将元素推到父元素高度的 50%

Question

.qty_wrap{
  height:100px;
  background: red;
}

<div style="position: absolute; left: 0; top: 0; z-index: 999; margin: 0 auto; bottom: 0" class="qty_wrap">
        <select>
          <option>Blue</option>
          <option selected>Green</option>
          <option>Red</option>
        </select>
      </div>

我想将我的 select 元素推到垂直居中。

Answer 1

尝试将 align-items 设置为 center 的 flexbox。

.qty_wrap {
  height: 100px;
  background: silver;
  position: absolute;
  display: flex;
  align-items: center;
}

<div class="qty_wrap">
  <select>
    <option>Blue</option>
    <option selected>Green</option>
    <option>Red</option>
  </select>
</div>

不清楚为什么要设置容器为position:absolute，如果只是为了让它和select框等宽，其实可以实现通过使用 display:inline-flex。

.qty_wrap {
  height: 100px;
  background: silver;
  display: inline-flex;
  align-items: center;
}

<div class="qty_wrap">
  <select>
    <option>Blue</option>
    <option selected>Green</option>
    <option>Red</option>
  </select>
</div>