文本无法在Bootstrap导航栏中居中切换

.center-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav center-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">文本1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">文本2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">文本3</a>
    </li>
  </ul>
</nav>