Centering absolute positionned flex children on IE11

You can if use position:relative/absolute and coordonates as in the olden days:

Démo to run with IE11 : https://jsbin.com/puvuwidoyu/1/edit?html,css,output

.wrapper {
  background-color: lightblue;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
}

.child1 {
  height: 50px;
  width: 50px;
  border: 1px solid green; 
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child2 {
  height: 20px;
  width: 20px;
  border: 1px solid red;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="wrapper">
  <div class="child1">111</div>
  <div class="child2">2</div>
</div>

since children are in absolute position, in IE11, what comes at center is the top left corner of the box no matter the size of the box.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top