将元素推到父级高度的 50%答案

【问题标题】：Push element to 50% of parent's height将元素推到父级高度的 50%
【发布时间】：2016-07-30 10:49:06
【问题描述】：

.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 元素推到垂直居中。

【问题讨论】：

可能重复：stackoverflow.com/q/28455100/3597276
可能重复：stackoverflow.com/questions/396145/…

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

为未来：使用transform 和top: 50% 是另一种解决方案。如果你不喜欢使用new attributes，比如flex。

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

select {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

<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>

【讨论】：