▷Flexbox: centrar horizontal y verticalmente ✔️ Foro Ayuda 【 2024 】

Si encuentras algo que no comprendes puedes comentarlo y trataremos de ayudarte rápidamente.

Solución:

Creo que quieres algo como lo siguiente.

html, body 
    height: 100%;

body 
    margin: 0;

.flex-container 
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

.row 
    width: auto;
    border: 1px solid blue;

.flex-item 
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;

Vea la demostración en: http://jsfiddle.net/audetwebdesign/tFscL/

Tu .flex-item los elementos deben estar a nivel de bloque (div en lugar de span) si desea que la altura y el acolchado superior / inferior funcionen correctamente.

También en .row, establezca el ancho en auto en lugar de 100%.

Tu .flex-container las propiedades están bien.

Si quieres el .row para estar centrado verticalmente en el puerto de vista, asigne 100% de altura a html y body, y también poner a cero el body márgenes.

Tenga en cuenta que .flex-container necesita una altura para ver el efecto de alineación vertical; de lo contrario, el contenedor calcula la altura mínima necesaria para encerrar el contenido, que es menor que la altura del puerto de visualización en este ejemplo.

Nota:

los flex-flow, flex-direction, flex-wrap Las propiedades podrían haber facilitado la implementación de este diseño. Yo creo que el .row El contenedor no es necesario a menos que desee agregar algo de estilo alrededor de los elementos (imagen de fondo, bordes, etc.).

Un recurso útil es: http://demo.agektmr.com/flexbox/

Cómo centrar elementos vertical y horizontalmente en Flexbox

A continuación se muestran dos soluciones de centrado generales.

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:

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

, which is not a flex item */

MANIFESTACIÓN

Cuando los artículos flexibles se apilan horizontalmente:

Ajustar el flex-direction regla 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 entre padres e hijos. 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 hijos.

Por lo tanto, siempre deberá solicitar display: flex o display: inline-flex a un elemento padre para aplicar propiedades flexibles al hijo.

Para centrar vertical y / u horizontalmente el texto u otro contenido contenido en un elemento flexible, convierta el elemento en 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 el texto verticalmente dentro de una caja flexible?

Alternativamente, puede aplicar margin: auto al elemento de contenido del elemento flexible.

p  margin: auto;

Más información sobre flex auto márgenes aquí: Métodos para alinear elementos flexibles (ver cuadro # 56).

Centrado de varias líneas de elementos flexibles

Cuando un contenedor flexible tiene varias líneas (debido a la envoltura), align-content será necesaria la propiedad para la alineación de ejes cruzados.

De la especificación:

8.4. Embalaje de líneas flexibles: el align-content
propiedad

los align-content La propiedad alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, similar a cómo justify-content alinea elementos individuales dentro del eje principal.
Tenga en cuenta que esta propiedad no tiene ningún 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 navegadores principales, 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 utilice la tabla CSS y las propiedades de posicionamiento, consulte esta respuesta: https://stackoverflow.com/a/31977476/3597276

Agregar

.container 
    display: flex;
    justify-content: center;
    align-items: center;

al elemento contenedor de lo que quieras centrar. Documentación: justificar el contenido y alinear los elementos.

valoraciones y comentarios

Puedes estimular nuestra investigación poniendo un comentario o dejando una valoración te estamos eternamente agradecidos.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Flexbox: centrar horizontal y verticalmente