Center when only a single item in flexbox

Question

I have a flexbox-controlled footer. It can contain 1,2 or 3 subordinate divs.

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

With 2 or 3 divs, the css above works fine:

with three, Left and Right are flushed left and right and Middle is in the middle.
with 2 they are flushed left and right

But with a single div, it is left-justified. I would prefer it would be centered.

How can I adjust the css so that in the case of a single div it will be centered, while retaining the behaviour for 2 or 3 divs?

For anybody not needing `space-between`, `space-around` centers a single item by design [(jsfiddle demo](https://jsfiddle.net/fx6pw1hd/)). Here's the explanation: https://stackoverflow.com/q/36487476/3597276 — Michael Benjamin, Dec 24 '17 at 17:31

CyberAP · Accepted Answer · 2017-12-24T17:29:19.113

14

.footer > :only-child
{
    margin-left: auto;
    margin-right: auto;
}

edited Dec 24 '17 at 17:29

answered Dec 24 '17 at 17:22

CyberAP

1,195
1
11
17

Any reason not to use ```margin: auto``` ? – port5432 Dec 24 '17 at 18:25
2

It was in the initial answer. But as it was noted in the comments (and then removed), you'd better not overwrite rules when you don't need to. – CyberAP Dec 24 '17 at 18:26

score 5 · Answer 2 · answered Dec 24 '17 at 17:28

you can make sure your items grow with the available space so their content will be located relatively to the item

.footer > div {
   flex-grow:1:
   text-align: center; // for example
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.footer > div {
 flex-grow:1;
 text-align:center; //for example
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

score 3 · Answer 3 · answered Dec 24 '17 at 19:00

If you want to use the margin to just do that, adjust margin, you can use space-evenly, or the cross browsers trick with pseudo elements and your existing space-between

Stack snippet - pseudo + space-between

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer::before, .footer::after {
  content: '';
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

Stack snippet - space-evenly (browser support)

.footer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

<div class='footer'>
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

Center when only a single item in flexbox

3 Answers3