使用 justify-content: center 可将顶部导航居中。1. 构建 nav 容器包含链接；2. 设 .navbar 为 flex 布局并应用 justify-content: center 实现水平居中，配合 align-items: center 可垂直居中；3. 通过 margin 和 height 调整间距与高度，实现响应式居中效果。
要在CSS中使用Flexbox将顶部导航居中，关键是利用 justify-content: center 属性。这种方法简单高效，适用于现代网页布局。
1. 基本HTML结构
先构建一个包含导航项的 <nav></nav> 容器：
<nav class="navbar"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">联系</a> </nav>
2. 使用Flexbox实现水平居中
通过设置容器为 flex 并使用 justify-content: center，可以让所有导航链接在顶部水平居中显示：
.navbar {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
<p>.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
}</p>- display: flex 启用弹性布局
- justify-content: center 使子元素在主轴（默认为横轴）上居中对齐
- 可调整
margin控制链接间距
3. 可选增强：响应式与垂直居中
如果希望文字在导航栏内完全居中（包括垂直方向），可以加上：
立即学习“前端免费学习笔记（深入）”；
.navbar {
display: flex;
justify-content: center;
align-items: center; /* 垂直居中 */
height: 60px; /* 设定高度以体现垂直居中效果 */
background-color: #333;
}
- align-items: center 让内容在交叉轴上居中
- 适合需要视觉完全居中的设计场景
基本上就这些。使用 Flexbox 的 justify-content: center 是实现顶部导航居中最推荐的方式之一，代码简洁，兼容性好，适配性强。
