IE 11 align center

Question

Problem: Position absolute with parent align center is not working in IE, but working in Chrome/Safari.

Expected: Should behave the same with IE 11 browser.

IE 11 screenshot

.selectContainer {
  position: relative;
  display: flex;
  align-items: center; 
}
.selectContainer .select {
  border: 1px solid #8e99ab;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  background-color: #fff;
  height: 50px;
  padding: 12px 42px 12px 12px;
}
.selectContainer i {
  color: #707070;
  background: red;
  position: absolute;
  right: 0px;
  padding: 0 16px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
    <select name="" id="" class="select"></select>
    <i class="fa fa-sort"></i>
</div>

Answer 1

You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.

.selectContainer i {
    color: #707070;
    background: red;
    position: absolute;
    right: 0px;
    padding: 0 16px;
    top: 50%;
    transform: translateY(-50%);
}