How Can I Center Site Header In Nav With Random Width Of Suff Around?

What i want is almost same as this programs header, The Title is completely centered despite of the random width of the aside stuff. Yeah If course i am not making a software but

Solution 1:

Flexbox won't really work because the title must be centered within the entire header—not in the remaining space between the left and right items. Still, you can use flexbox to pin the left/right items to their respective corners. For the title, use absolute positioning within a relative container (the header).

header {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #333;
  color: #fdfdfd;
  padding: 0.5rem;
}

.title {
  position: absolute;
  left: 50%;
  transform: transalteX(-50%); 
}

<header><divclass="left"><span>item</span><span>longer item here</span></div><divclass="title">title</div><divclass="right"><span>item</span><span>item</span></div></header>

Solution 2:

you can do it using position: absolute; with left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

but in this case you have to test your app with any width possible to make sure the text wont get one above another

.nav {
  width: 100%;
  height: 45px;
  background: #212121;
  position: relative;
}

p {
  display: inline-block;
  color: #f1f2f3;
  padding: 010px;
}

p.left {
  float: left;
}

p.right {
  float: right;
}

.center {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)  translateY(-50%)
}

<divclass="nav"><pclass="left">stuff</p><pclass="center">center</p><pclass="right">stuff</p><pclass="right">stuff</p></div>