使用flex垂直居中在Internet Explorer 11中无法正常工作

Question

我正在尝试使用flex在2个div内居中放置图标。代码如下：

.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上，图标未垂直居中。相反，它停留在顶部。如何解决此问题，我究竟在做什么错？

Answer 1

IE 11没有对flex的完全支持，这似乎是在bug父控件内部有空白的错误。尝试添加受支持的另一条规则：

.div-1 {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  background-color: #228B22;
  align-items: center; /* Add this*/
}
.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>