Cómo centrar elementos vertical y horizontalmente en Flexbox
A continuación se presentan dos soluciones generales de centrado.
Uno para elementos flexibles alineados verticalmente ( flex-direction: column) y el otro para elementos flexibles alineados horizontalmente ( flex-direction: row).
En ambos casos, la altura de los divs centrados puede ser variable, indefinida, desconocida, lo que sea. La altura de los divs centrados no importa.
Aquí está el HTML para ambos:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (excluyendo estilos decorativos)
Cuando los elementos flexibles se apilan verticalmente:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
MANIFESTACIÓN
Cuando los elementos flexibles se apilan horizontalmente:
Ajuste la flex-directionregla del código anterior.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
MANIFESTACIÓN
Centrar el contenido de los elementos flexibles
El alcance de un contexto de formato flexible se limita a una relación padre-hijo. Los descendientes de un contenedor flexible más allá de los hijos no participan en el diseño flexible e ignorarán las propiedades flexibles. Esencialmente, las propiedades flexibles no son heredables más allá de los niños.
Por lo tanto, siempre tendrá que aplicar display: flexo display: inline-flexun elemento primario para aplicar propiedades flexibles al elemento secundario.
Para centrar verticalmente y / u horizontalmente el texto u otro contenido contenido en un elemento flexible, haga que el elemento sea un contenedor flexible (anidado) y repita las reglas de centrado.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Más detalles aquí: ¿Cómo alinear verticalmente el texto dentro de un flexbox?
Alternativamente, puede aplicar margin: autoal elemento de contenido del elemento flexible.
p { margin: auto; }
Obtenga información sobre los automárgenes flexibles aquí: Métodos para alinear elementos flexibles (consulte el cuadro 56).
Centrar múltiples líneas de artículos flexibles
Cuando un contenedor flexible tiene varias líneas (debido al ajuste), la align-contentpropiedad será necesaria para la alineación del eje transversal.
De la especificación:
8.4. Empaque Flex Lines: la align-content
propiedad
La align-contentpropiedad alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, de forma similar a cómo justify-contentalinea elementos individuales dentro del eje principal.
Tenga en cuenta que esta propiedad no tiene efecto en un contenedor flexible de una sola línea.
Más detalles aquí: ¿Cómo funciona flex-wrap con align-self, align-items y align-content?
Soporte del navegador
Flexbox es compatible con todos los principales navegadores, excepto IE <10 . Algunas versiones recientes del navegador, como Safari 8 e IE10, requieren prefijos de proveedor . Para una forma rápida de agregar prefijos, use Autoprefixer . Más detalles en esta respuesta .
Solución de centrado para navegadores antiguos
Para obtener una solución de centrado alternativa que utiliza la tabla CSS y las propiedades de posicionamiento, consulte esta respuesta: https://stackoverflow.com/a/31977476/3597276
