如何将div内的无序列表垂直居中？附导航栏代码求助

没问题！要让导航栏里的列表项垂直居中，咱们可以利用你已经用到的Flex布局来优化，几步就能搞定：

先修复一个小语法错误 #

你当前的CSS里.nav_container的width属性后面写了冒号，得改成分号，不然样式会失效：

.nav_container{ width:50%; } /* 把冒号改成分号 */

核心修改：用Flex实现垂直居中 #

接下来给.nav_container和.nav_menu添加Flex相关样式，让列表项垂直居中：

修改后的完整CSS代码：

.header_wrapper{ 
  background:#d8d0d01a; 
  display: flex; 
  align-items: center; /* 可选：让整个header的子容器（logo/nav/search）也垂直居中 */
  min-height: 60px; /* 可选：给header设置一个最小高度，方便看居中效果 */
} 
.logo_container{ width:20%; } 
.nav_container{ 
  width:50%; 
  display: flex; 
  align-items: center; /* 让容器内的内容垂直居中 */
  justify-content: center; /* 可选：让导航菜单在容器内水平居中，也可以改成flex-start左对齐 */
} 
.search_container{ width:30%; }

/* 重置列表默认样式并设置横向排列 */
.nav_menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem; /* 可选：设置列表项之间的间距 */
}

/* 可选：给列表项加点样式，提升交互感 */
.nav_menu li{
  padding: 0.5rem 0;
  cursor: pointer;
}

原理说明 #

• .nav_container设置display: flex; align-items: center;后，内部的.nav_menu会在垂直方向上居中对齐；
• .nav_menu设置display: flex;让列表项从默认的垂直排列变成水平排列，配合gap可以轻松控制项之间的间距；
• 如果给.header_wrapper加上align-items: center;，那整个导航栏的三个模块（logo、导航、搜索）都会在header的垂直方向上居中，整体视觉更协调。

这样修改后，你的导航列表项就会完美垂直居中啦！

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