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

【问题标题】：Centering vertically using flex not working correctly in Internet Explorer 11使用 flex 垂直居中在 Internet Explorer 11 中无法正常工作
【发布时间】：2020-04-10 15:49:21
【问题描述】：

我正在尝试使用 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 上，图标不是垂直居中的。相反，它被粘在顶部。我该如何解决这个问题，我到底做错了什么？

【问题讨论】：

标签： html css internet-explorer internet-explorer-11

【解决方案1】：

IE 11 没有完全支持 flex，这似乎是一个在 flex 父级内部有边距的错误。尝试添加另一个支持的规则：

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

【讨论】：

非常感谢您的回答。完美运行。