Flex布局导航栏对齐核心是justify-content控主轴（水平）对齐，align-items控交叉轴（垂直）对齐；水平居中用justify-content:center，垂直居中需设高度后配align-items:center，三段式用space-between加中间容器嵌套flex居中，响应式通过flex-wrap或column配合媒体查询实现。

用 Flex 布局做导航栏对齐，核心是搞清楚 justify-content 和 align-items 分别管什么：前者控制主轴（默认水平）上的对齐，后者控制交叉轴（默认垂直）上的对齐。导航栏通常是横向排列的，所以主轴是水平方向。

让导航项在一行内水平居中对齐

给导航容器（比如

或

）设为 flex，并用 justify-content: center：

nav {
  display: flex;
  justify-content: center; /* 所有导航项整体水平居中 */
}

注意：这会让整组 或

在容器里居中排布，不是每个项自己居中。

让导航项高度一致、文字垂直居中

导航栏常需要所有链接上下居中显示，这时靠 align-items: center：

nav {
  display: flex;
  align-items: center; /* 所有子元素在交叉轴（垂直方向）居中 */
  height: 60px; /* 设个固定高，让 align-items 有参照 */
}

如果没设高度，align-items: center 仍有效，但效果可能不明显——因为容器高度由内容撑开，建议显式设置高度或最小高度（min-height）。

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

左右两端固定 + 中间居中（常见三段式导航）

比如左侧 logo、中间菜单、右侧登录按钮。不用 JS，纯 CSS 可这样写：

• 给容器设 display: flex 和 justify-content: space-between
• 把中间部分（如
  ）单独再包一层
• 给这个中间容器加 display: flex 和 justify-content: center

这样左、中、右三块自动分配空间，中间菜单还能独立居中。

响应式下换行对齐（如小屏竖排）

加 flex-wrap: wrap 允许换行，再配合 justify-content 控制每行对齐方式：

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 换行后每行依然居中 */
}

搭配 @media 查询，在小屏时让 flex-direction: column，再用 align-items: center 让竖排菜单项水平居中。