Flexbox no se centra verticalmente en IE

Tengo una página web simple con contenido de Lipsum que se centra en la página. La página funciona bien en Chrome y Firefox. Si reduzco el tamaño de la ventana, el contenido llena la ventana hasta que no puede y luego agrega una barra de desplazamiento y llena el contenido fuera de la pantalla, hacia la parte inferior.

Sin embargo, la página no se centra en IE11. Puedo hacer que la página se centre en IE flexionando el cuerpo, pero si lo hago, el contenido comienza a salir de la pantalla hacia la parte superior y corta la parte superior del contenido.

A continuación se muestran los dos escenarios. Consulte los violines asociados. Si el problema no es evidente de inmediato, reduzca el tamaño de la ventana de resultados para que se vea obligada a generar una barra de desplazamiento.

Nota: esta aplicación solo se dirige a las últimas versiones de Firefox, Chrome e IE (IE11), que son compatibles con la recomendación candidata de Flexbox , por lo que la compatibilidad de funciones no debería ser un problema (en teoría).

Editar : cuando se usa la API de pantalla completa para pantalla completa del div externo, todos los navegadores se centran correctamente usando el CSS original. Sin embargo, al salir del modo de pantalla completa, IE vuelve a estar centrado horizontalmente y alineado verticalmente hacia arriba.

Editar : IE11 utiliza una implementación de Flexbox que no es específica del proveedor. Actualizaciones de diseño de caja flexible ("Flexbox")

Se centra y cambia el tamaño correctamente en Chrome / FF, no se centra pero cambia el tamaño correctamente en IE11

Violín: 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%;
}

Se centra correctamente en todas partes, corta la parte superior cuando se reduce

Violín: 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%;
}

Descubrí que, por ejemplo, el navegador tiene problemas para alinear verticalmente los contenedores internos, cuando solo se establece el estilo de altura mínima o cuando falta el estilo de altura. Lo que hice fue agregar estilo de altura con algo de valor y eso solucionó el problema por mí.

por ejemplo :

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

Así que ahora tenemos el estilo de altura, pero la altura mínima lo sobrescribirá. De esa manera, es decir, es feliz y todavía podemos usar min-height.

Espero que esto sea útil para alguien.

Intente envolver cualquier div con el que tenga flexboxed flex-direction: columnen un contenedor que también sea flexboxed.

Acabo de probar esto en IE11 y funciona. Una solución extraña, pero hasta que Microsoft haga externa su corrección de errores internos ... ¡tendrá que bastar!

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 ejemplos para que pruebes en IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Aquí está mi solución de trabajo (SCSS):

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

En caso de que alguien llegue aquí con el mismo problema que tuve, que no se abordó específicamente en los comentarios anteriores.

Tenía margin: autoen el elemento interno que hizo que se pegara a la parte inferior de su padre (o el elemento externo). Lo que me solucionó fue cambiar el margen a margin: 0 auto;.

Este es un error conocido que parece haberse solucionado internamente en Microsoft.

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

La respuesta original de 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;
}

He actualizado ambos violines. Espero que haga su trabajo.

centrado

    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;
}

centro y desplazamiento

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;
    }

No tengo mucha experiencia con Flexbox pero me parece que la altura forzada en el htmlybody etiquetas hace que el texto desaparezca en la parte superior cuando se cambia el tamaño; no pude probar en IE, pero encontré el mismo efecto en Chrome.

Te bifurqué el violín y quité el heightywidth declaraciones .

body
{
    margin: 0;
}

También parecía que la flexconfiguración debía aplicarse a otros flexelementos. Sin embargo, aplicando display: flexa los .innerproblemas causados, establecí explícitamente el .innertodisplay: block y configuré el .outertoflex para el posicionamiento.

Establecí la .outeraltura mínima para llenar la ventana gráfica, ladisplay: flex , y establecí la alineación horizontal y vertical:

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

Me puse .innera display: blockexplícitamente. En Chrome, parecía heredado flexde .outer. También configuro el ancho:

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

Esto solucionó el problema en Chrome, con suerte podría hacer lo mismo en IE11. Aquí está mi versión del violín: http://jsfiddle.net/ToddT/5CxAy/21/

Encontré una buena solución que funcionó para mí, consulte este enlace https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Primero, agregamos un div principal, segundo cambiamos la altura mínima: 100% a min- altura: 100vh. Funciona a las mil maravillas.

// 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;
}  

Si puede definir el ancho y el alto del padre, hay una forma más sencilla de centralizar la imagen sin tener que crear un contenedor para ella.

Por alguna razón, si define el ancho mínimo, IE también reconocerá el ancho máximo.

Esta solución funciona para IE10 +, Firefox y 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/