What's the cleanest approach to position three nav elements symmetrically across the width of the page?

Question

This is my approach using flexbox, which creates asymmetry whenever one element is wider than the rest:

<nav>
  <div>Logo</div>
  <div>Project Info</div>
  <div>Take me home</div>
</nav>

nav {
  display: flex;
  justify-content: space-between;
}

This is my approach using absolute positioning, which creates symmetry but doesn't respect line breaks in the center element:

<nav>
  <div>Logo</div>
  <div class="center">Project Info</div>
  <div>Take me home</div>
</nav>

nav {
  display: flex;
  justify-content: space-between;
  position: relative;

  .center {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}