Horizontally centering a flex container

Question

When using flex for creating a grid of images, how can I horizontally center the grid itself on the page? I still want the images to left-align on each row. I would like it to be dynamic to the number of elements per row.

Jsfiddle with what I have so far

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  margin: 10px;
}

<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

Basically...it's hard...usually requires JS or hidden dummy elements. — Paulie_D, Feb 09 '16 at 16:05
http://stackoverflow.com/questions/32802202/center-flex-container-but-align-left-flex-items/32811002#32811002 — Paulie_D, Feb 09 '16 at 16:06
I'm not sure that a *detailed canonical answer* is really required here. Flexbox is not designed for grids. It's designed to enable more flexible layouts through distribution of empty space. For grids, the W3C is developing the [**CSS Grid Layout Module**](https://www.w3.org/TR/css-grid-1/). Until it gains browser support you can use [**Masonry**](http://masonry.desandro.com/). — Michael Benjamin, Feb 11 '16 at 16:55

Mikael · Accepted Answer · 2016-02-12T14:07:08.093

This solution will work regardless of the number of elements and width.

https://jsfiddle.net/p01mx39h/14/

function addDummies() {
  imgsPerRow = Math.floor($(".gallery").width() / $(".gallery-artwork").outerWidth(true));
  if (imgsPerRow > 1) {
    missingImages = imgsPerRow - $(".gallery-artwork").length % imgsPerRow;
    while (missingImages > 0) {
      $(".gallery").append("<div class='gallery-artwork-dummy'></div>");
      $(".gallery-artwork-dummy").css('width', $('.gallery-artwork').outerWidth(true));
      missingImages--;
    }
  }
}

$(document).ready(function() {
 addDummies();
});

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

Playing with the width makes the bottom element center instead of go to the left. — JacksonHaenchen, Jul 19 '16 at 20:01

zessx · Answer 2 · 2016-02-11T16:56:35.047

As stated by many answer here and on the web, you'll need (at least, for now) dummies elements.
Here's a way to do it easily, without calculation, and in plain JavaScript:

Add as many dummies as the amount of .gallery-artwork elements
Give these dummies the same style, without any height, nor vertical margins

This method has an advantage: you don't need to do any calculation! You're sure to always have enough dummies (whatever the screen width, the number of elements and their amount per row) to push your elements on the left side of your container.

So here's the code!

var gallery = document.querySelector('.gallery'),
    artworks = gallery.querySelectorAll('.gallery-artwork'),
    dummy = document.createElement('div');
dummy.classList.add('gallery-dummy');

// One element = one dummy
[].forEach.call(artworks, function() {
  gallery.appendChild(dummy.cloneNode());
});

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-artwork {
  width: 400px;
  margin: 10px;
}
.gallery-dummy {
  width: 400px;
  margin: 0 10px;
  height: 0;
}

<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

Just edited my answer, I missed to use `cloneNode()` function, sorry. — zessx, Feb 11 '16 at 16:57

zer00ne · Answer 3 · 2016-02-10T13:55:39.703

You can wrap an element around the whole thing and then just center as normal.
The matter of having the flex items left aligned is as simple as using the default value of justify-content: flex-start, but it doesn't center. So in order to maintain center-aligned flex-items, we use justify-content: center.
It centers perfectly but if the second row has a smaller amount of flex-items, then it'll look like this
In order to maintain everything being horizontally centered, and have a nice left-aligned behavior for the last row, we can add an extra flex-item and give it this: visibility: hidden. If the number of flex-items are dynamic, we use the following selector: .gallery-artwork:last-of-type { visibility: hidden; }

Here's the Demo

CSS

/* The wrap element that surrounds and centers everything */
.exhibition {
  padding: 10px;
  margin: 20px auto;
}
/* justify-content: center is needed for centering of the flex-items */   
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-artwork {
  width: 400px;
  margin: 10px;
}
 /* This is the last of the gallery-artwork (flex-item). 
 Being of the same dimensions as the other flex-items and hidden from site,
fills in the gap of an uneven row of flex-items. */

.gallery-artwork:last-of-type {
  visibility: hidden;
}

HTML

<section class="exhibition">
  <div class="gallery">
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
  </div>
</section>

DebRaj · Answer 4 · 2016-02-10T17:01:27.677

0

Here is your updated CSS:

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content:center;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  flex-flow: column;
  margin: 0.5em;
}

jQuery:

$(document).ready(function(){
var i = $('.gallery-artwork').length;
    if (i % 2 == 0){
    }else{
        $(".gallery").append("<div class='gallery-artwork'></div>");
    }
});

Fiddle: https://jsfiddle.net/debraj/p01mx39h/9/

edited Feb 10 '16 at 17:01

answered Feb 10 '16 at 13:36

DebRaj

599
4
16

But then the last image is not left-aligned. – Oskar Persson Feb 10 '16 at 13:37
Are you willing to add some sort of jQuery? – DebRaj Feb 10 '16 at 14:23
I would like it to be dynamic to the number of elements per row. – Oskar Persson Feb 10 '16 at 14:45
You can add elements dynamically. It will calculate all divs under `gallery` and if the total number is odd then only append the spacer div. – DebRaj Feb 10 '16 at 14:56
This isn't dynamic to the number of elements. Try this one: https://jsfiddle.net/ceab4gts/13/show/ – Oskar Persson Feb 11 '16 at 14:27
Still not dynamic, try removing an image – Oskar Persson Feb 11 '16 at 14:44
Yep, that's why removed the comment. – DebRaj Feb 11 '16 at 14:47

score -1 · Answer 5 · answered Feb 09 '16 at 16:41

-1

Slightly alter your gallery css:

justify-content: center;

I used this today, so this is why I popped it in right away. But this CSS-tricks page really helped with the flex bits and pieces.

answered Feb 09 '16 at 16:41

rrd

5,789
3
28
36

But then the last row is not left-aligned – Oskar Persson Feb 09 '16 at 16:42

Horizontally centering a flex container

5 Answers5