网页居中导航栏的css写法

可以使用flex布局实现居中导航栏的效果，以下是一个示例代码：

HTML代码：

<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</nav>

CSS代码：

nav {
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: #333;
}

解释一下：

- `nav` 使用 `flex` 布局，设置 `justify-content: center;` 即可实现居中。
- `ul` 使用 `flex` 布局，设置 `list-style: none;` 去掉默认的列表样式，`margin: 0;` 和 `padding: 0;` 去掉默认的外边距和内边距。
- `li` 设置左右间距为 `10px`，可以根据需求自行调整。
- `a` 去掉下划线，并设置字体颜色为 `#333`。