How to center align a flexbox container?

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.

I added a width of 100% in the container but it had no effect. here my snippet: https://jsfiddle.net/cx1svoky/3/ — Sidney Sousa, Aug 11 '16 at 12:16
@chirag. I actually tried 1000px but it doesn't really center. — Sidney Sousa, Aug 11 '16 at 12:23

score 25 · Answer 1 · edited Sep 28 '17 at 09:25

25

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.

edited Sep 28 '17 at 09:25

LW001

2,452
6
27
36

answered Aug 11 '16 at 12:17

Michał Perłakowski

88,409
26
156
177

3

It centers perfectly. But I just noticed that the fourth box does not float to the left now.The idea is to have boxes being added from left to write as more articles come. For instance if I have 7 boxes,the seventh box should flow to the left and not to the center. Hope I made some sense. – Sidney Sousa Aug 11 '16 at 12:30
@WosleyAlarico Then you can use `margin: 0 auto;` with a fixed width, for example `width: 800px;`. See [JS Fiddle](https://jsfiddle.net/cx1svoky/9/). – Michał Perłakowski Aug 11 '16 at 12:35
It doesn't really center like I mentioned in other comments previously. But well,it seems to be the only option. – Sidney Sousa Aug 11 '16 at 12:51

score 3 · Answer 2 · edited Aug 11 '16 at 12:27

3

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

edited Aug 11 '16 at 12:27

Randy

9,419
5
39
56

answered Aug 11 '16 at 12:22

Alaa DAIRY

31
2

1

Mind sending a fiddle? – Sidney Sousa Aug 11 '16 at 12:34

score 1 · Answer 3 · answered Aug 11 '16 at 12:22

1

Use margin:0px auto; with a width.

For example:

.container{

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

answered Aug 11 '16 at 12:22

twodee

606
5
24

score 0 · Answer 4 · answered Aug 11 '16 at 13:00

0

So, if you want to have boxes being added from left to right, and the first box on the next row to be left aligned, you can use:`

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

Fiddle

answered Aug 11 '16 at 13:00

Petya Naumova

727
2
11
23

2

this does not center the flexbox container though – Ben Nov 10 '18 at 17:08

How to center align a flexbox container?

4 Answers4