¿Cómo alinear al centro un contenedor flexbox? [duplicate]

Preguntas HTML
⏰ 3 minutos de lectura

avatar de usuario del agente de usuario
agente de usuario

Creé con éxito una cuadrícula receptiva como muestra el fragmento.

En este momento, veo las casillas alineadas a la izquierda.

¿Cómo puedo poner el contenedor en el centro de la página sin tener que usar relleno?

Traté de usar margin:auto Pero no funcionó. 

.container{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;
}
.box{
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;
}
@media only screen and ( max-width:768px ){	
    .box{
        width:100%;
        max-width:40%;
        border:1px solid red;
    }
}
<section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS violín.

  • agregue ancho a su clase de contenedor

    – chirag

    11 de agosto de 2016 a las 12:14

  • Usar margin:auto su contenedor debe tener width.

    – Ismail RBOUH

    11 de agosto de 2016 a las 12:14

  • Agregué un ancho del 100% en el contenedor pero no tuvo efecto. aquí mi fragmento: jsfiddle.net/cx1svoky/3

    – agente de usuario

    11 de agosto de 2016 a las 12:16

  • dar ancho en px, como 500px

    – chirag

    11 de agosto de 2016 a las 12:17

  • @chirag. De hecho, probé 1000px pero realmente no se centra.

    – agente de usuario

    11 de agosto de 2016 a las 12:23

Avatar de usuario de Michał Perłakowski
Michał Perłakowski

Usar justify-content: center; en lugar de margin: auto;:

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.box {
   width: 100%;
   max-width: 30%;
   border: 1px solid red;
   margin: 5px;
}
@media only screen and (max-width: 768px) { 
  .box {
    width: 100%;
    max-width: 40%;
    border: 1px solid red;
  }
}

Ver justifiy-content documentos en MDN.

Violín JS actualizado.

  • Se centra perfectamente. Pero acabo de notar que el cuarto cuadro no flota hacia la izquierda ahora. La idea es agregar cuadros desde la izquierda para escribir a medida que llegan más artículos. Por ejemplo, si tengo 7 cajas, la séptima caja debe fluir hacia la izquierda y no hacia el centro. Espero haber tenido algo de sentido.

    – agente de usuario

    11/08/2016 a las 12:30

  • @WosleyAlarico Entonces puedes usar margin: 0 auto; con un ancho fijo, por ejemplo width: 800px;. Ver JS violín.

    – Michał Perłakowski

    11 de agosto de 2016 a las 12:35

  • Realmente no se centra como mencioné en otros comentarios anteriormente. Pero bueno, parece ser la única opción.

    – agente de usuario

    11 de agosto de 2016 a las 12:51

Avatar de usuario de Alaa DAIRY
Alaa LÁCTEOS

simplemente agregue esta línea a su código original:

.container{
  width: 100%
}

y poner el div caja en otra div que tienen un margin: auto;

si necesita 2 cajas en la misma línea agregue display: inline-table; hacia box clase

  • ¿Te importaría enviar un violín?

    – agente de usuario

    11 de agosto de 2016 a las 12:34

Usar margin:0px auto; con un width.

Por ejemplo:

.container{

display:flex;
flex-wrap:wrap;
text-align:center;
margin:0px auto;
width: 400px;
}

Por lo tanto, si desea que se agreguen cuadros de izquierda a derecha y que el primer cuadro de la siguiente fila se alinee a la izquierda, puede usar:

.container {
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 0 auto;
  border: 1px solid red;
}
.container:after {
  content: "";
  flex: auto;
}

Violín

¿Ha sido útil esta solución?