答案：使用 flexbox 将导航居中需设置容器 display: flex 和 justify-content: center。.navbar 设背景与内边距，.nav-list 用 flex 布局居中子项，通过 gap 控制间距，li 中的 a 标签设样式与悬停效果；响应式下 @media (max-width: 768px) 改 flex-direction: column 并垂直居中，实现多设备适配。
要使用 css Flexbox 实现顶部导航居中，关键是将容器设置为弹性布局，并对齐内容到中心。下面是一种常见且有效的方法。
1. 基本 html 结构
先构建一个简单的导航结构：
<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>
2. 使用 Flexbox 居中导航项
通过以下 CSS 设置，可以让导航项在顶部水平居中显示：
.navbar { background-color: #333; padding: 1rem 0; } <p>.nav-list { display: flex; justify-content: center; /<em> 水平居中 </em>/ list-style: none; margin: 0; padding: 0; gap: 2rem; /<em> 导航项之间的间距 </em>/ }</p><p>.nav-list a { color: white; text-decoration: none; font-family: Arial, sans-serif; font-size: 1rem; }</p><p>.nav-list a:hover { color: #ddd; }</p>
说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局。
- justify-content: center 让子元素在主轴（这里是横向）上居中。
- gap 控制菜单项之间的距离，比 margin 更简洁。
3. 自适应屏幕宽度
为了让导航在小屏幕上也能良好显示，可以添加响应式处理：
@media (max-width: 768px) { .nav-list { flex-direction: column; align-items: center; gap: 1rem; } }
这样在移动设备上，导航会垂直排列并居中。
基本上就这些。利用 Flexbox 的 justify-content: center 和 display: flex，就能轻松实现顶部导航的居中布局，同时保持代码简洁和响应式能力。