Flexbox: centro horizontal y vertical


672

Cómo centrar div horizontalmente y verticalmente dentro del contenedor usando flexbox. En el ejemplo a continuación, quiero que cada número esté 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 su CSS tiene row{que no tiene efecto en las filas. Si lo cambia al .row{resultado sería totalmente diferente.
Hamid Mayeli

Respuestas:


753

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

Sus .flex-itemelementos deben estar a nivel de bloque (en divlugar de span) si desea que la altura y el relleno superior / inferior funcionen correctamente.

Además, en .row, establezca el ancho en autolugar de 100%.

Tus .flex-containerpropiedades están bien.

Si desea .rowque se centre verticalmente en el puerto de vista, asigne un 100% de altura a htmly body, y también ponga a cero los bodymárgenes.

Tenga en cuenta que .flex-containernecesita 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 vista en este ejemplo.

Nota:
El flex-flow, flex-direction, flex-wrappropiedades podría haber hecho este diseño más fácil de implementar. Creo que el .rowcontenedor no es necesario a menos que desee agregar un poco de estilo alrededor de los elementos (imagen de fondo, bordes, etc.).

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


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

1
@cimmanon Estoy de acuerdo contigo 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, simplemente asumí un navegador perfecto para llegar a una demostración funcional. Gracias de nuevo por tu comentario, apreciamos los comentarios.
Marc Audet

1
Si se desborda, recorta la parte superior. i.imgur.com/3dgFfQK.png ¿ Alguna forma de evitar esto?
Brian Gates

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


253

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:

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

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


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

2
@kapil, ajuste la propiedad justify -content a space-between o space-around ... jsfiddle.net/8o29y7pd/105
Michael Benjamin

3
Esta respuesta debería estar arriba. El uso de Flex debería ser la forma preferida de hacerlo, ya que se escala muy bien en dispositivos y pantallas. Es mucho más fácil que usar flotadores y administrar múltiples divs.
SeaWarrior404

IE 11 no funciona correctamente en el centro horizontal y vertical
giveJob

1
Respuesta perfecta, ¡probablemente la mejor en Google!
ENERO

43

Añadir

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

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


3
Gracias por la breve respuesta. Si bien todo el lenguaje anterior está bien, estas 3 líneas son exactamente lo que llegué aquí buscando (bueno, display: inline-flexen mi caso, pero esa fue una edición fácil)
Jeff Ward,

27

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

alinear elementos: centro; ->

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

justify-content: 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 flex: http://css-tricks.com/almanac/properties/j/justify-content/ y http://ptb2.me/flexbox/

Buena suerte.


1
este es un buen punto, por hoy (para admitir solo los navegadores más nuevos) solo necesita las dos últimas líneas -kit web .. para safari y la última para todos los demás
Pete Kozak

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

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

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

@ user3378649 La última versión de safari podría admitir Flex-box, consulte este enlace: caniuse.com/#search=flexbox
QMaster

15

1 - Establecer CSS en el elemento primario div a display: flex;

2 - Establezca CSS en el div padre para flex-direction: column;
que 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 elemento primario solo contiene el elemento secundario y nada más.

3 - Establecer CSS en el padre div a justify-content: center;

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

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



8

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

NOTA: Debe configurar widthy heightpara 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>


3

Si necesita centrar un texto en un enlace, esto funcionará:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>


1
¡Dulce! A veces siento que soy demasiado volcado para Flexbox.) Supongamos que necesito más práctica, parte de su lógica aún no está clara. Gracias Leo!
Zoltán

3

margin: autofunciona perfecto con flexbox. Se centraliza vertical y horizontalmente.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="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>  
</div>
</body>
</html>


1

RESULTADO: Código

CÓDIGO

HTML:

<div class="flex-container">
  <div class="rows">

    <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>  
</div>

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

donde flex-containerdiv se usa para centrar vertical y horizontalmente su rowsdiv, y rowsdiv se usa para agrupar sus "elementos" y ordenarlos en una columna basada en uno.


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

Si bien este código puede responder la pregunta, proporcionar un contexto adicional con respecto a cómo y / o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta.
Piotr Labunski

-7

Usando CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

echa un vistazo AQUÍ


1
Dado que esto es fácil y ampliamente compatible con los navegadores modernos con Flexbox puro, su solución de biblioteca seguramente no sea necesaria. Especialmente porque preguntó cómo hacerlo usando Flex Box, no una biblioteca CSS.
bungleofsketches
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.