Centering divs inside a container

Question

I have multiple smaller fix sized div floated inside a container div. I want them to be equally spaced so that the whole block gives the impression of being center aligned.

Right now they are aligned to the left (this is how float works, I know). I understand this is not readily possible, but just want some hacks so that I can achieve the same.

One way to do that is to calculate the necessary width (let say I need 3 divs per row, each 100px wide with 10px margin. So total width of container should be 100*3+60) and apply that width to the container div and set margin auto.

#container {
    width: 360px;
    margin: 0px auto;
}
.items { /* these are smaller divs */
    width: 100px;
    margin: 10px;
    float: left;
}

But this won't look nice with different screen size unless I specifically set width for different medias.

Another way is to use the flex display.

#container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.items { /* these are smaller divs */
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}

It almost served my purpose, but the issue is when you have more than one divs in the bottom row, it just put the second div at the rightmost side, rather than aligning under second column (again this is expected behavior I know, not any issue).

So, are there any tricks/hacks for what I want to achieve?

UPDATE (in response to the duplicate reporting): The solution of the other question (that is reported as same as this question) uses fixed container width whereas I mentioned above that I don't want to fix container width. So that solution was not the one I am looking for.

The solution that worked perfectly is mentioned by Josh below, with only change of justify-content: space-around so that contents remain centered even when the window is narrowed.

Answer 1

So, are there any tricks/hacks for what I want to achieve?

This is definitely a hack, but it seems to work. You can add some empty flexbox items with a height of 0 to serve as placeholders. In doing so, the flexbox item placement will be calculated as expected, because the empty flexbox item's width will be accounted for and fill the space.

The minimum number of empty flexbox items should be equal to the maximum number of flexbox items in a row minus one. Of course, you can always add more.. just in case.

In the example below, I used the :empty pseudo class to select the empty placeholder flexbox items.

Updated Example

The relevant CSS:

.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 0 10px 0;
}

Full HTML/CSS:

#container {
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto;
}
.items {
  flex: 0 0 auto;
  width: 100px;
  margin: 10px;
}
#item1 {
  background-color: #F00;
}
#item2 {
  background-color: #0F0;
}
#item3 {
  background-color: #00F;
}
#item4 {
  background-color: #ABC;
}
#item5 {
  background-color: #A00;
}
#item6 {
  background-color: #6AF;
}
#item7 {
  background-color: #07A;
}
#item8 {
  background-color: #A79;
}
#item9 {
  background-color: #AF4;
}
#item10 {
  background-color: #FF4;
}
.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

<div id="container">
    <div id="item1" class="items">a</div>
    <div id="item2" class="items">b</div>
    <div id="item3" class="items">c</div>
    <div id="item4" class="items">c</div>
    <div id="item5" class="items">c</div>
    <div id="item6" class="items">c</div>
    <div id="item7" class="items">c</div>
    <div id="item8" class="items">c</div>
    <div id="item9" class="items">c</div>
    <div id="item10" class="items">c</div>
    <div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div>
</div>

Answer 2

To center a div like that you going to need it in a container like this. So I added a class holder with a max-width and margin: 0 auto so it's centered inside the container. Fiddle

So items have to

Answer 3

I hope you can use JQuery.

You can set:

#container {
    width: 100%;
}

.items {
    float: left;
    width: 100px;
    margin: 10px 0px;
}

After load and resize page you can execute a function that calculate and set margin

function setMargin() {
    cWidth = $('#container').width();
    iWidth = $('.items').width();

    totalItems = $('.items').length;
    itemsPerRow = parseInt(cWidth / iWidth);

    if(totalItems < itemsPerRow) {
        space = cWidth - iWidth * totalItems;
        margin = space/(totalItems+1);
    } else {
        space = cWidth - iWidth * itemsPerRow;
        margin = space/(itemsPerRow+1);
    }

    $(".items").css("margin-left", margin+"px");

}