¿Cómo centrar un contenedor Flexbox horizontal y verticalmente?

10 minutos de lectura

avatar de usuario
bsr

como centrar un <div> horizontal y verticalmente dentro del contenedor usando flexbox? En el siguiente ejemplo, quiero que cada número se muestre uno debajo del otro (en filas), que están centrados horizontalmente.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

  • En tu CSS tienes row{ que no tiene efecto en las filas. Si lo cambias a .row{ el resultado sería totalmente diferente.

    –Hamid Mayeli

    20 de octubre de 2019 a las 13:26

avatar de usuario
marc audet

Creo que quieres algo como lo siguiente.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    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;
}
<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

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

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

También en .rowestablezca el ancho en auto en vez de 100%.

Su .flex-container las propiedades estan bien.

si quieres el .row centrado verticalmente en el puerto de vista, asigne 100% de altura a html y bodyy 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 hecho que este diseño fuera más fácil de implementar. Yo creo que el .row El contenedor no es necesario a menos que desee agregar algún estilo alrededor de los elementos (imagen de fondo, bordes, etc.).

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

  • Los elementos flexibles no necesitan estar a nivel de bloque a menos que el contenido que contienen lo requiera. Además, antepuso todas las propiedades de visualización, pero no antepuso ninguna de las otras propiedades de Flexbox (que tienen nombres diferentes en los otros borradores).

    – cimarrón

    26 de septiembre de 2013 a las 14:32

  • @cimmanon Estoy de acuerdo con usted sobre el nivel de bloque, y edité mi publicación en consecuencia. El nivel de bloque no es necesario para la alineación, pero puede ser necesario si el usuario desea especificar la altura, etc. Me tomé la libertad de los prefijos del navegador, solo asumí un navegador perfecto para llegar a una demostración funcional. Gracias de nuevo por su comentario, agradezco los comentarios.

    – Marc Audet

    26/09/2013 a las 14:57


  • Si se desborda, corta la parte superior. i.imgur.com/3dgFfQK.png ¿Alguna forma de evitar esto?

    –Brian Gates

    04/09/2014 a las 20:00

  • @BrianGates Si la altura de la ventana es demasiado corta, ¿cómo desea que se muestren los 4 elementos, 2×2, 1×4?

    – Marc Audet

    5 sep 2014 a las 11:38

  • La solución está aquí: stackoverflow.com/questions/24538100/…

    –Brian Gates

    5 sep 2014 a las 22:19

avatar de usuario
miguel benjamin

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

ingrese la descripción de la imagen aquí

MANIFESTACIÓN


Cuando los elementos 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;
}

ingrese la descripción de la imagen aquí

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 elementos secundarios 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 tendrá que aplicar display: flex o display: inline-flex a un elemento principal para aplicar propiedades flexibles al elemento secundario.

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 verticalmente el texto dentro de un flexbox?

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

p { margin: auto; }

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


Centrado de varias líneas de elementos flexibles

Cuando un contenedor flexible tiene varias líneas (debido al envoltorio), el align-content propiedad será necesaria para la alineación del eje transversal.

De la especificación:

8.4. Packing Flex Lines: la 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 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?


Compatibilidad con 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 proveedores. Para una forma rápida de agregar prefijos, use autoprefijador. Más detalles en esta respuesta.


Solución de centrado para navegadores antiguos

Para obtener una solución de centrado alternativa utilizando la tabla CSS y las propiedades de posicionamiento, consulte esta respuesta: https://stackoverflow.com/a/31977476/3597276

  • ¿Podemos hacerlo horizontalmente a la derecha, a la izquierda y verticalmente al centro?

    – Kapil

    28 de febrero de 2017 a las 12:28

  • @kapil, ajusta el justificar-contenido propiedad a espacio entre o espacio alrededorjsfiddle.net/8o29y7pd/105

    – Michael Benjamín

    28 de febrero de 2017 a las 12:54

  • Esta respuesta debería estar en la parte superior. El uso de Flex debería ser la forma preferida de hacer esto, ya que se escala muy bien entre dispositivos y pantallas. Es mucho más fácil que usar flotadores y administrar múltiples divs adherirse a eso.

    – SeaWarrior404

    10 de noviembre de 2017 a las 9:33

  • Es decir 11 no funciona correctamente centro horizontal y vertical

    – dar trabajo

    14 de marzo de 2019 a las 12:02

  • gracias por notar que los elementos secundarios no son automáticamente elementos flexibles. Necesitamos atenderlos si queremos que lo sean.

    – klewis

    13 oct 2020 a las 10:29

Agregar

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

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

avatar de usuario
Vikas Gupta

Puedes hacer uso de

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

en su componente principal

ingrese la descripción de la imagen aquí

No olvide usar atributos específicos importantes de los navegadores:

alinear elementos: centro; –>

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justificar-contenido: centro; –>

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Puede leer estos dos enlaces para comprender mejor la flexión:
http://css-tricks.com/almanac/properties/j/justify-content/ y
http://ptb2.me/flexbox/

Buena suerte.

  • este es un buen punto, porque hoy (para admitir solo los navegadores más nuevos) solo necesita las dos últimas líneas -webkit.. para safari y la última para todos los demás

    –Pete Kozak

    17 de julio de 2014 a las 12:24


  • +1 porque los borradores de trabajo antiguos de 2009 y marzo de 2012 todavía tienen una participación de usuarios significativa (combinado alrededor del 8% según caniuse.com).

    – benebun

    24/09/2014 a las 15:58

  • Flext no funciona en safari, ¿cómo podrías solucionar ese problema?

    – usuario3378649

    25 de enero de 2015 a las 6:38

  • Revisé la última versión de safari en Windows hace muchos días y no la recuerdo muy bien, pero revisaré y te diré. Por favor, dime a qué versión de safari te refieres. y en que sistema operativo?

    – QMaster

    25 de enero de 2015 a las 13:47

  • @user3378649 La última versión de safari podría ser compatible con Flex-box. Consulte este enlace: caniuse.com/#search=flexbox

    – QMaster

    4 oct 2016 a las 18:47

avatar de usuario
melaniep

1 – Establecer CSS en div principal para display: flex;

2 – Establezca CSS en div principal para flex-direction: column;
Tenga en cuenta que esto hará que todo el contenido dentro de ese div se alinee de arriba a abajo. Esto funcionará mejor si el div padre solo contiene al hijo y nada más.

3 – Establezca CSS en div principal para justify-content: center;

Aquí hay un ejemplo de cómo se verá el CSS:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  • este es un buen punto, porque hoy (para admitir solo los navegadores más nuevos) solo necesita las dos últimas líneas -webkit.. para safari y la última para todos los demás

    –Pete Kozak

    17 de julio de 2014 a las 12:24


  • +1 porque los borradores de trabajo antiguos de 2009 y marzo de 2012 todavía tienen una participación de usuarios significativa (combinado alrededor del 8% según caniuse.com).

    – benebun

    24/09/2014 a las 15:58

  • Flext no funciona en safari, ¿cómo podrías solucionar ese problema?

    – usuario3378649

    25 de enero de 2015 a las 6:38

  • Revisé la última versión de safari en Windows hace muchos días y no la recuerdo muy bien, pero revisaré y te diré. Por favor, dime a qué versión de safari te refieres. y en que sistema operativo?

    – QMaster

    25 de enero de 2015 a las 13:47

  • @user3378649 La última versión de safari podría ser compatible con Flex-box. Consulte este enlace: caniuse.com/#search=flexbox

    – QMaster

    4 oct 2016 a las 18:47

avatar de usuario
Polar

diplay: flex; por su contenedor y margin:auto; para su artículo funciona perfecto.

NOTA: Tienes que configurar el width y height para ver el efecto.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad