用Flex布局让导航栏居中，需对<ul>设display: flex和justify-content: center，并重置padding: 0、margin: 0；用gap控制间距，li去list-style，a去下划线并设display: block和padding。
用 Flex 布局让导航栏居中，核心就是给导航容器（比如 <nav> 或 <ul>）设置 display: flex 和 justify-content: center。
确保父容器是 flex 容器
导航栏通常由 <nav> 包裹 <ul>，要居中的是整个导航项列表，所以一般对 <ul> 设置 flex：
- 给
<ul>加display: flex - 再加
justify-content: center，让内部的<li>水平居中排列 - 顺手加上
list-style: none和清除默认内边距，避免布局偏移
处理导航项的间距和样式
居中后，如果 <li> 紧挨着，看起来拥挤，可以用以下方式优化：
- 给
<li>设margin: 0 1rem（左右留空），或用gap: 1rem（更推荐，作用于 flex 容器上） - 去掉
<a>的默认下划线：text-decoration: none - 让链接可点击区域更友好：给
<a>加display: block和内边距
注意：别忘了重置默认样式
浏览器会给 <ul> 加默认的 padding-left（通常是 40px），这会导致即使用了 justify-content: center，整体也偏右。务必重置：
立即学习“前端免费学习笔记（深入）”；
ul { padding: 0; margin: 0; }- 或者更稳妥地，在 flex 容器上直接写：
ul { display: flex; justify-content: center; padding: 0; margin: 0; gap: 1.5rem; }
完整小例子
HTML：
<nav><ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
CSS：
nav ul {display: flex;
justify-content: center;
padding: 0;
margin: 0;
gap: 1.5rem;
}
nav li {
list-style: none;
}
nav a {
display: block;
text-decoration: none;
padding: 0.5rem 1rem;
}
