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