Why Doesn't Justify-Content: Center Work in Ie

Why doesn't justify-content: center work in IE?

IE11 needs the parent to have flex-direction: column.

This example has your button rotated:

#div {

  height: 200px;

  width: 50px;

  border: 1px solid black;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column

}

#button {

  height: 50px;

  width: 200px;

  min-width: 200px;

  border: 1px solid black;

  background-color: red;

  transform: rotate(90deg);

}

<div id="div">

  <button id="button">HELLO</button>

</div>

Justify-content in flexbox not working in IE 11

You need to add flex-direction: column; to the parent element in order to justify-content in IE11

.align-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-align: center; 
    -ms-flex-align: center; 
        align-items: center; 
  -webkit-box-pack: right; 
    -ms-flex-pack: right; 
        justify-content: right;
  text-align:right;
  flex-direction: column; }

justify content flex-end not working for IE

IE seems to align items differently using justify-content when there is an overflow. it doesn't only happen with flex-end, you will face the same using center. Any value that will create a top overflow will not work as expected.

It will also happen in a row direction. Any property that will create a left overflow will not work.

Examples where the alignment is doing nothing:

.container {

  display:inline-flex;

  height:50px;

  width:50px;

  margin:50px;

  border:2px solid green;

}

.container span {

  flex-shrink:0;

  width:200%;

  background:red;

}

.alt {

  flex-direction:column;

}

.alt span {

  height:200%;

  width:auto;

}

<div class="container" style="justify-content:flex-end;">

  <span></span>

</div> 

<div class="container" style="justify-content:center;">

  <span></span>

</div>

<div class="container alt" style="justify-content:flex-end;">

  <span></span>

</div>

<div class="container alt" style="justify-content:center;">

  <span></span>

</div>

Flexbox centering not working in IE 11

Flexbox is pretty buggy when it comes to IE per CanIUse, 2 of which that are mentioned:

• In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
• IE 11 does not vertically align items correctly when min-height is used see bug

This being said, add explicit heights as a fallback on .score-wrapper for IE11.

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
  height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}

Flex item not centering in IE

The Problem

Absolutely-positioned children of a flex container are taken out of the normal flow of the document.

In fact, they are not even flex items, because they don't accept flex properties.

from the spec:

§ 4.1. Absolutely-positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.

Here is why your layout works anyway in Chrome, Firefox and Edge:

continuing with the spec:

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. For this purpose, auto margins are treated as zero.

read more >>

However, IE11 provides only partial support for the current flexbox specification, which may explain the rendering difference.

Solution

Since your content item isn't doing anything flex-related, just use a standard, non-flex method for horizontal and vertical centering.

body {

  height: 100vh;

  position: relative;

}

.content {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 400px;

  height: 200px;

  background-color: #333333;

}

<div class="content">

Centering elements doesn't work in Internet Explorer

The problem is caused by a combination of two factors:

• conflict between author and Bootstrap styles
• faulty IE rendering behavior

This is the code at issue:

Bootstrap styles:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;   /* <-- source of the problem in IE */
    margin-left: auto;    /* <-- source of the problem in IE */
}

Author styles:

.content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* <-- source of the problem in IE */
    float: none;
    max-height: 30%;
}

To make a long story short, for the content to center properly in IE use either auto margins or justify-content: center.

Using both breaks the centering in IE because of faulty implementation of CSS priority.

For details see my answer here: Flex auto margin not working in IE10/11

Revised Demo (with justify-content disabled)

---

Related Topics