Push element to 50% of parent's height

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>

I want to push my select element to center vertically.

possible duplicate: http://stackoverflow.com/q/28455100/3597276 — Michael Benjamin, Apr 09 '16 at 02:37
likely duplicate: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Eric Bloch, Apr 09 '16 at 05:24

Stickers · Accepted Answer · 2016-04-09T03:07:27.493

Try flexbox with align-items set to center.

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

It is not clear why you set the container to position:absolute, if that is only for making it the same width as the select box, you can actually achieve that by using 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>

score 0 · Answer 2 · answered Apr 09 '16 at 02:49

for future: Using transform with top: 50% is another solution. if you don't like to use new attributes like 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>

Push element to 50% of parent's height

2 Answers2