Flexbox no se centra verticalmente en IE

116

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%;
}
Dragonseer
fuente
No tengo acceso a IE11 en este momento, ¿ha probado esta solución: stackoverflow.com/questions/16122341/… ?
cimmanon
margin: auto no parece haber hecho una diferencia.
Dragonseer
Informe de errores Microsoft al menos tendrán un error menos en el lanzamiento oficial, ya que siempre IE tendrá algo (muchos errores únicos) para manejar ..
MarmiK
necesita usar -ms-flexboxpara IE ..
avrahamcool
IE11 utiliza el estándar actual de pantalla Flexbox: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . Lo intenté de todos modos y no hizo ninguna diferencia; el contenido todavía está alineado en la parte superior. Además, tenga en cuenta mi edición en la pregunta original que indica que el div externo se centra correctamente cuando está en pantalla completa, pero está alineado en la parte superior cuando está fuera de pantalla completa.
Dragonseer

Respuestas:

225

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.

Kaloyan Stamatov
fuente
9
No te olvides -ms-flex-align:center;de IE10. El soporte para align-itemsse agregó solo en IE11 .
Boaz
¡Ah! Tantos meses después, esto me salvó: establecer una altura en lugar de una altura mínima funcionó.
Pete
@KaloyanStamatov Eche un vistazo al autoprefixer y ayúdese a deshacerse de estos molestos problemas entre navegadores.
hitautodestruct
29
Esta solución no funciona cuando el contenido es mayor que la altura mínima. De min-heighthecho, anula la heightregla, pero si el contenido excede min-height, simplemente se extenderá fuera de los límites. La respuesta de @ericodes resuelve este problema y la solución funciona en todos los navegadores que admiten flex.
lachie_h
2
Para cualquiera que venga aquí en o después de 2019, la mejor solución es la de @ sergey-fedirko que no requiere elementos HTML adicionales ni alturas duras;) Esta: stackoverflow.com/a/54796082/134120
AsGoodAsItGets
71

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/

ericodes
fuente
1
Debe publicar el código que usó para solucionar el problema en su respuesta real, en lugar de vincularlo a una URL externa. Entonces, su respuesta seguirá siendo útil, incluso después de que el enlace muera.
Kelly Keller-Heikkila
11
Esta es, de lejos, la mejor solución para este error. Todas las demás respuestas sugieren una altura fija en el contenedor, que no funciona si el contenido es de altura variable. Esta solución permite el uso de en min-heightlugar de una heightregla estricta, sin dejar de centrarse verticalmente en todos los navegadores que admiten el uso de display: flex.
lachie_h
1
Solo display:flexse necesita en el contenedor, y tal vez uno de estos en el niño: width: 100% flex-basis:100% flex-grow:1dependiendo de su contenido / estilo.
fregante
esta solución alternativa no funciona si se establece la propiedad FlexContainerWrapper align-items. Tienes que envolver el flexbox original con un flexbox sin esta propiedad.
Marcus Krahl
¡Hola @MarcusKrahl! ¿está diciendo que envuelva el flexbox original (FlexContainer) con un flexbox sin una align-itemspropiedad (FlexContainerWrapper)?
ericodes
10

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;
  }
}
Sergey Fedirko
fuente
6

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

Gal Talmor
fuente
5

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

David Zulaica
fuente
43
Sin embargo, aparentemente no se ha solucionado externamente.
Blazemonger
4
"Este problema parece haberse solucionado en Microsoft Edge. Actualmente no estamos trabajando en errores de funciones en Internet Explorer fuera de los problemas relacionados con la seguridad". Cerraron el problema para las versiones de IE anteriores a Edge
David Zulaica
1
La solución parece ser usar la altura en lugar de la altura mínima, si puede.
frodo2975
3

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;
    }
Umar Khan
fuente
Gracias por tu aporte. Desafortunadamente, sus Fiddles no parecen funcionar en Chrome o IE11. El ejemplo de centrado ya no se centra en Chrome y el ejemplo de centro y desplazamiento no está centrado en IE11 y aún corta el contenido.
Dragonseer
1

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/

Todd
fuente
Gracias por su respuesta. La declaración de alto y ancho es necesaria para centrar verticalmente en IE. Sin él, el contenido ya no se centra en IE11.
Dragonseer
¿Incluso con la altura establecida en el div exterior? ¿Quizás agregar una altura mínima al cuerpo?
Todd
1

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;
}  
Avirtum
fuente
0

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/

Humberto Mendes
fuente