如何让导航栏中的ul列表项居中对齐？Align-items与justify-content无效

你的问题出在nav作为flex容器时，内部的logo、toggle和menu三个元素默认紧凑排列，没有合理分配空间，导致menu无法自动居中。可以通过以下两种简单方法实现预期效果：

方法一：利用自动外边距（推荐） #

给.menu添加margin: 0 auto，在flex容器中，自动外边距会让元素自动填充剩余空间，从而将menu推到中间位置：

nav {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  margin: 0 auto; /* 新增这行 */
  align-items: center;
  list-style: none;
}

方法二：分配flex空间 #

给logo和toggle设置flex: 1，让它们平分nav容器的剩余空间，menu就会自然处于中间：

nav {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

.logo, .toggle {
  flex: 1; /* 新增这行 */
}

.menu {
  display: flex;
  margin: 0;
  align-items: center;
  list-style: none;
}

两种方案的区别：

• 方法一无需改动其他元素，适合只需要menu居中、不要求左右元素对称的场景；
• 方法二会让logo和toggle各自占据相等宽度的空间，实现严格的左右对称布局。

内容的提问来源于stack exchange，提问作者Egor