Centering vertically using flex not working correctly in Internet Explorer 11

user_5056347 0
Viewed 54

I am trying to center an icon inside 2 divs using flex. The code is below:

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

This works on almost all browsers I tested on. However, on IE11, the icon is not centered vertically. Instead, it is stuck to the top. How can I fix this issue, and what exactly am I doing wrong?

internet-explorer-11 internet-explorer css html
1 Answers

IE 11 has no full support to flex, it seems to be a bug with margins inside flex parent. Try add another rule supported:

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

user_91762320
Related