IE 11 выровнять центр

Question

Проблема: абсолютное положение с родительским центром выравнивания не работает в IE, но работает в Chrome / Safari.

Ожидаемое: должно работать так же с браузером IE 11.

IE 11 скриншот

.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

Вы можете добавить свойство CSS bottom: 16px; к .selectContainer i, например:

        .selectContainer i {
            color: #707070;
            background: red;
            position: absolute;
            right: 0px;
            bottom: 16px;
            padding: 0 16px;
        }

Пример образца в браузере IE11:

Answer 2

Вы можете использовать top:50%;transform:translateY(-50%); для .selectContainer i Я проверял это.

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