如何将导航栏居中对齐

<div class="navbar-container">
  <ul class="navbar">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

.navbar-container {
  display: flex;
  justify-content: center;
}

.navbar {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar li {
  margin: 0 10px;
}

.navbar li a {
  text-decoration: none;
  color: #000;
}

.navbar {
  text-align: center;
}

.navbar a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: #000;
}