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%;
}
fuente
-ms-flexbox
para IE ..Respuestas:
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 :
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.
fuente
-ms-flex-align:center;
de IE10. El soporte paraalign-items
se agregó solo en IE11 .min-height
hecho, anula laheight
regla, pero si el contenido excedemin-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.Intente envolver cualquier div con el que tenga flexboxed
flex-direction: column
en 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:
CSS:
2 ejemplos para que pruebes en IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
fuente
min-height
lugar de unaheight
regla estricta, sin dejar de centrarse verticalmente en todos los navegadores que admiten el uso dedisplay: flex
.display:flex
se necesita en el contenedor, y tal vez uno de estos en el niño:width: 100%
flex-basis:100%
flex-grow:1
dependiendo de su contenido / estilo.align-items
. Tienes que envolver el flexbox original con un flexbox sin esta propiedad.align-items
propiedad (FlexContainerWrapper)?Aquí está mi solución de trabajo (SCSS):
fuente
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: auto
en 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 amargin: 0 auto;
.fuente
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
fuente
La respuesta original de https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042
fuente
He actualizado ambos violines. Espero que haga su trabajo.
centrado
centro y desplazamiento
fuente
No tengo mucha experiencia con
Flexbox
pero me parece que la altura forzada en elhtml
ybody
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
height
ywidth
declaraciones .También parecía que la
flex
configuración debía aplicarse a otrosflex
elementos. Sin embargo, aplicandodisplay: flex
a los.inner
problemas causados, establecí explícitamente el.inner
todisplay: block
y configuré el.outer
toflex
para el posicionamiento.Establecí la
.outer
altura mínima para llenar la ventana gráfica, ladisplay: flex
, y establecí la alineación horizontal y vertical:Me puse
.inner
adisplay: block
explícitamente. En Chrome, parecía heredadoflex
de.outer
. También configuro el ancho: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/
fuente
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.
fuente
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.
https://jsfiddle.net/HumbertoMendes/t13dzsmn/
fuente