How to center multi-row inline-flex

Question

Let's have a simple demo showing inline-flex functionality: https://jsfiddle.net/p3mztw4e/

div.c1 {
  background: #ddd;
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

div.c3 {
  border-color: #0f0;
  border-style: solid;
  border-width: 3px;
  margin: 5px;
  vertical-align: top;
}

<center>

  <div class="c1">
    <div class="c3">
      111111111111111111<br>abc
    </div>
    <div class="c3">
      22222222222222222
    </div>
  </div>

  <br><br>

  <div class="c1">
    <div class="c3">
      111111111111111111<br>abc
    </div>
    <div class="c3">
      22222222222222222
    </div>
    <div class="c3">
      3333333333333333
    </div>
    <div class="c3">
      444444444444444
    </div>
    <div class="c3">
      55555555555555
    </div>
    <div class="c3">
      6666666666666
    </div>
    <div class="c3">
      777777777777<br>def
    </div>
    <div class="c3">
      88888888888888888
    </div>
    <div class="c3">
      9999999999999
    </div>
  </div>

</center>

The result looks like this:

While the single-row inline-flex div works fine and it is centered as expected, the multi-row inline-flex div is not centered.

Why?

Please note that the number of "columns" is not fixed. Window resizing should change its number to fit as many as possible.

How can we center the entire content with multiple rows?

Using `` doesn't make sense since it's been obsolete for a couple of decades. — j08691, Jan 30 '20 at 22:07

Mat Sz · Accepted Answer · 2020-01-30T22:11:34.557

Centering the flex contents is possible by adding the following to div.c1:

justify-content: center;

The reason for your single-row container being centered is that its width is less than the width of the container (<center>, which you shouldn't use in HTML5 since it's deprecated) and it's being centered with text-align: center (that's what <center> does). The one with two rows fills the entire parent container and is thus not getting centered.

Also, you may not need inline-flex in this case (if all you need is just the centering). You may also not need margin: 0 auto. And please, remove the <center> - it has no place in 2020 - it's deprecated, and it can be easily recreated with CSS text-align: center;.

Thank you. That is exactly what I was missing. – Ωmega Jan 30 '20 at 22:12 — Ωmega, Jan 30 '20 at 22:12

score 1 · Answer 2 · answered Jan 30 '20 at 22:08

The multi-row inline-flex <div> is indeed centered -- in its container (<center>). If you set a fixed width on this element you will see this:

If you want the boxes within .c1 to be centred, you're looking to apply justify-content: center (and also optionally align-items: center if you want vertical centering of the text inside the textboxes).

This can be seen in the following:

div.c1 {
  background: #ddd;
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

div.c3 {
  border-color: #0f0;
  border-style: solid;
  border-width: 3px;
  margin: 5px;
  vertical-align: top;
}

<center>

  <div class="c1">
    <div class="c3">
      111111111111111111<br>abc
    </div>
    <div class="c3">
      22222222222222222
    </div>
  </div>

  <br><br>

  <div class="c1">
    <div class="c3">
      111111111111111111<br>abc
    </div>
    <div class="c3">
      22222222222222222
    </div>
    <div class="c3">
      3333333333333333
    </div>
    <div class="c3">
      444444444444444
    </div>
    <div class="c3">
      55555555555555
    </div>
    <div class="c3">
      6666666666666
    </div>
    <div class="c3">
      777777777777<br>def
    </div>
    <div class="c3">
      88888888888888888
    </div>
    <div class="c3">
      9999999999999
    </div>
  </div>

</center>

Note that this vertical centering will shrink the vertical height of the textboxes, due to them being constrained by the text. You may also want to consider a fixed height for these.

Thanks. I knew it will be something simple :) – Ωmega Jan 30 '20 at 22:13 — Ωmega, Jan 30 '20 at 22:13

How to center multi-row inline-flex

Why?

2 Answers2