使用 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，这似乎是 flex parent 内部边距的错误。尝试添加另一个支持的规则：

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

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

Centering vertically using flex not working correctly in Internet Explorer 11

html

css

internet-explorer

internet-explorer-11