使用 justify-content: center 实现导航菜单水平居中，align-items: center 实现垂直居中，两者结合可使菜单完全居中；需确保父容器设为 flex 布局，且主轴方向影响属性作用，常见于水平菜单居中场景。
在使用 CSS Flexbox 布局时，让导航菜单居中是一个常见需求。要实现这一点，关键是理解 align-items 和 justify-content 两个属性的作用，并根据需要选择正确的组合。
水平居中：使用 justify-content center
如果你只想让导航项在容器中水平居中，比如一排横向的菜单项居中显示，应该使用 justify-content: center。
说明：示例代码：
.nav {
display: flex;
justify-content: center;
}
这样，导航菜单项就会在水平方向上居中对齐。
立即学习“前端免费学习笔记（深入）”；
垂直居中：使用 align-items center
如果希望菜单项在容器中垂直居中（例如在固定高度的导航栏中上下居中），应使用 align-items: center。
说明：- align-items 控制交叉轴（cross axis）上的对齐方式。在行方向布局中，交叉轴是垂直的。
- 设置为 center 后，菜单项会在容器高度方向上垂直居中。
示例代码：
.nav {
display: flex;
height: 80px;
align-items: center;
}
这会让所有菜单项在 80px 高的导航栏中垂直居中。
完全居中（水平 + 垂直）
若想让整个导航菜单在容器中完全居中（比如一个居中的水平菜单栏），可以同时使用两个属性：
- justify-content: center 实现水平居中。
- align-items: center 实现垂直居中。
示例代码：
.nav-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 全屏高，便于看到垂直居中效果 */
}
.nav {
list-style: none;
display: flex;
gap: 20px;
}
这种写法常用于登录页或全屏导航的设计中。
注意点
- 确保父容器设置了 display: flex，否则 align-items 和 justify-content 不生效。
- flex-direction 会影响主轴方向。如果设为 column，justify-content 就会控制垂直方向。
- 如果只是单行导航菜单水平居中，通常只需要 justify-content: center。
基本上就这些。掌握这两个属性的区别和配合，就能灵活控制导航菜单的居中效果。不复杂但容易忽略细节。
