Centering navbar title in center of screen

Question

I'm trying to center the title of the navbar in the middle of the screen. Is there a way to do this without custom margin/padding values (trying to keep it responsive)? In the image below, I want to center "Title text goes here" in the middle of the screen.

<header>
  <nav class="nav">
    <img class="nav-logo" src="./jumbotron.jpg" alt="logo">
    <h1 class="nav-title">Title text goes here</h1>
    <ul class="nav-links">
      <li class="nav-link"><a href="https://www.google.com">nav link 1</a></li>
      <li class="nav-link"><a href="https://www.google.com">nav link 2</a></li>
      <li class="nav-link"><a href="https://www.google.com">nav link 3</a></li>
    </ul>
  </nav>
</header>

/*****************************************************************************/
/* Navbar */
/*****************************************************************************/
.nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: white;
}

.nav-logo {
    width: 10%;
}

.nav-title {
    flex: 1;
    margin: auto 0;
    text-align: center;
    font-size: 30px;
}

.nav-links {
    flex: 0.5;
    display: flex;
    width: 100%;
    padding: 20px;
    justify-content: flex-end;
    list-style: none;
}

Answer 1

You can achieve this with flexbox. By setting align-items to stretch on the header and flex-grow to 1 on the title, the title will expand to cover whatever space is unoccupied by the logo and the links. Then, text-align:center will center your title's text:

.nav {
  display: flex;
  flex-direction: row;
  align-items: stretch
  background-color: white;
}

.nav-logo {
  width: 10%;
}

.nav-title {
  flex-grow: 1;
  margin: auto 0;
  text-align: center;
  font-size: 30px;
  text-align: center;
}

.nav-links {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: flex-end;
  list-style: none;
}