Я пытаюсь центрировать значок внутри 2 делений, используя flex. Код ниже:
.div-1 {
width: 50px;
height: 50px;
display: flex;
border-radius: 50%;
background-color: #228B22;
}
.div-2 {
margin: auto;
}
i {
color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="div-1">
<div class="div-2">
<i class="fa fa-leaf fa-2x" aria-hidden="true"></i>
</div>
</div>
Это работает практически во всех браузерах, на которых я тестировал. Однако в IE11 значок не центрируется по вертикали. Вместо этого он застрял на вершине. Как я могу исправить эту проблему, и что именно я делаю не так?