Flexbox Not Centering Vertically in IE

Question

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't and then adds a scroll bar and fills content off screen, toward the bottom.

However, the page doesn't center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.

Below are the two scenarios. See the associated Fiddles. If the problem isn't evident right away, reduce the size of the result window so that it's forced to generate a scroll bar.

Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the Candidate Recommendation of Flexbox , so feature compatibility shouldn't be an issue (in theory).

Edit : When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned.

Edit : IE11 uses non-vendor specific implementation of Flexbox. Flexible box ("Flexbox") layout updates

---

Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11

Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

---

Centers Correctly in Everywhere, Cuts Off Top When Sized Down

Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Answer 1

I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style is missing at all. What I did was to add height style with some value and that fix the issue for me.

for example :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

So now we have height style, but the min-height will overwrite it. That way ie is happy and we still can use min-height.

Hope this is helpful for someone.

Answer 2

Try wrapping whatever div you have flexboxed with flex-direction: column in a container that is also flexboxed.

I just tested this in IE11 and it works. An odd fix, but until Microsoft makes their internal bug fix external...it'll have to do!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 examples for you to test in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Answer 3

Just in case someone gets here with the same issue I had, which is not specifically addressed in previous comments.

I had margin: auto on the inner element which caused it to stick to the bottom of it's parent (or the outer element). What fixed it for me was changing the margin to margin: 0 auto; .

Answer 4

This is a known bug that appears to have been fixed internally at Microsoft.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Answer 5

Here is my working solution (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Answer 6

i have updated both fiddles. i hope it will make your work done.

centering

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

center and scroll

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }

Answer 7

I don't have much experience with Flexbox but it seems to me that the forced height on the html and body tags cause the text to disappear on top when resized-- I wasn't able to test in IE but I found the same effect in Chrome.

I forked your fiddle and removed the height and width declarations.

body
{
    margin: 0;
}

It also seemed like the flex settings must be applied to other flex elements. However, applying display: flex to the .inner caused issues so I explicitly set the .inner to display: block and set the .outer to flex for positioning.

I set the minimum .outer height to fill the viewport, the display: flex , and set the horizontal and vertical alignment:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

I set .inner to display: block explicitly. In Chrome, it looked like it inherited flex from .outer . I also set the width:

.inner
{
    display:block;
    width: 80%;
}

This fixed the issue in Chrome, hopefully it might do the same in IE11. Here's my version of the fiddle: http://jsfiddle.net/ToddT/5CxAy/21/

Answer 8

Found a good solution what worked for me, check this link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 First, we add a parent div, second we change min-height:100% to min-height:100vh. It works like a charm.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  

Answer 9

If you can define the parent's width and height, there's a simpler way to centralize the image without having to create a container for it.

For some reason, if you define the min-width, IE will recognize max-width as well.

This solution works for IE10+, Firefox and Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

Answer 10

The original answer from https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}