How to center align a flexbox container? [duplicate]

Question

I successfully created a responsive grid as the snippet shows.

At the moment, I see the boxes aligned to the left.

How can I put the container in the center of the page without having to use padding?

I tried using margin:auto but it did not work.

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

Answer 1

Use justify-content: center; instead of 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;   } } 

See justifiy-content docs on MDN.

Updated JS Fiddle.

Answer 2

just add this line to your original code:

.container{   width: 100% } 

and put the div box into another div that have a margin: auto;

if you need 2 boxes in the same line add display: inline-table; to the box class