如何使用CSS居中显示导航栏的文本？

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: center;
  /* 可选：使导航栏的文本垂直居中 */
  align-items: center;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  display: inline-block;
  margin: 0 10px;
}

.nav-list li a {
  text-decoration: none;
}

/* 可选：使导航栏的文本垂直居中 */
.navbar {
  line-height: 50px; /* 假设导航栏的高度为50px */
}