[FIXED] How can i center site header in nav with random width of suff around?

Issue

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 still i want almost this kind of random stuff around AND Still The TITLE MUST BE NEATLY CENTERED

Please, Don't give me advice like 'Just use grid/flex'
Instead, Tell me how am i gonna use the grid/flex to center it ?? (I am trying and ,,, still Cant solve it.)

Solution

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>
  <div class="left">
    <span>item</span>
    <span>longer item here</span>    
  </div>
  <div class="title">title</div>
  <div class="right">
    <span>item</span>
    <span>item</span>    
  </div>
</header>

Answered By - Andy Hoffman

Answer Checked By - Cary Denson (PHPFixing Admin)