Horizontal centering a flexbox item, with an uneven number of items

Question

I've got a flex container, with a logo and some links. I want the logo to be centered, and the links over on the right. The best I can seem to do is center the logo in the remaining space, which is not centered on the container.

Here are some of my attempts so far:

.header{background:#CCC;padding:1rem; margin-bottom:2rem;}
.logo{background:skyblue;text-align:center;height:30px;width:200px;}

/*-----------------------*/

#header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
#header1-logo {
  justify-self: center;
}
#header1-nav {
  justify-self: flex-end;
}

/*-----------------------*/

#header2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#header2-logo {
  margin: 0 auto;
}

<header id="header1" class="header">
  <div id="header1-logo" class="logo">LOGO</div>
  <nav id="header1-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>

<header id="header2" class="header">
  <div id="header2-logo" class="logo">LOGO</div>
  <nav id="header2-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>

How can I center the logo in the actual center of the flex container?

Did you look at [Center flex item in container, when surrounded by other flex items](https://stackoverflow.com/q/39028999/215552)? — Heretic Monkey, Feb 08 '19 at 17:28

score 2 · Answer 1 · answered Feb 08 '19 at 17:23

Not using flexbox exclusively, but an option would be to absolute position the logo?

.header{background:#CCC;padding:1rem; margin-bottom:2rem;}
.logo{background:skyblue;text-align:center;height:30px;width:200px;}

/*-----------------------*/

#header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
#header1-logo {
  position: absolute;
  left:0;
  right:0;
  margin:auto;
}
#header1-nav {
  margin-left:auto;
}

<header id="header1" class="header">
  <div id="header1-logo" class="logo">LOGO</div>
  <nav id="header1-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>

score 1 · Accepted Answer · edited Feb 08 '19 at 18:29

You're pretty close I think. I've had good success in the past just adding a "blank-element" with a flex of 1 before the logo element. The logo, and the links element should also have a flex of 1, this will ensure that they all take up the same amount of space on the screen (1/3rd)

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: grey solid 2px;
}
#header-logo {
  flex: 1;
  margin: 0 auto;
  border: black solid 2px;
}
#blank-Element {
  flex:1;
}
#header-nav {
  flex:1;
  // other styles here

}

<header id="header" >
  <div id="blank-Element"></div> 
  <div id="header-logo">LOGO</div>
    <nav id="header-nav">
      <a href="#">foo</a>
      <a href="#">bar</a>
      <a href="#">baz</a>
    </nav>
</header>

edit: left in the borders so you can see what it's doing easily

Check here for all sorts of good flexbox tips: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I considered this, but wasn't sure if it would be "acceptable practice" or not, so I'm glad to hear that it wasn't just some weird idea I thought of. This seems to be working, so thanks! — Chris Barr, Feb 08 '19 at 18:27

Horizontal centering a flexbox item, with an uneven number of items

How can I center the logo in the actual center of the flex container?

2 Answers2