如何将侧边栏内的导航栏垂直水平居中并调整Logo位置？

我看了你的需求和现有代码，问题出在flex布局的对齐逻辑没捋清楚。咱们调整一下CSS结构，就能轻松实现Logo在上方、导航链接垂直水平居中，同时保持导航栏固定全屏高度的效果。

第一步：先明确HTML结构（假设你是这样的结构，如果不是可以对应调整） #

<header class="site-header">
  <div class="logo">
    <!-- 这里放你的Logo图片或文字 -->
    <img src="your-logo.png" alt="网站Logo">
  </div>
  <nav class="nav-container">
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

第二步：修改后的CSS代码 #

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 18rem;
  height: 100vh;
  /* 用flex垂直排列子元素 */
  display: flex;
  flex-direction: column;
  /* 让所有子元素水平居中 */
  align-items: center;
  /* 加个内边距，避免内容贴边 */
  padding: 0 1rem;
  /* 可选：加个背景色方便看效果 */
  background-color: #f5f5f5;
  /* 去掉默认margin */
  margin: 0;
}

.logo {
  /* 让Logo和顶部保持间距 */
  margin-top: 2rem;
  /* 保持flex布局，方便内部Logo元素对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-container {
  /* 关键：用auto margin让导航容器垂直居中 */
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

.nav-links {
  /* 去掉ul默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
  /* 让链接垂直排列并水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 链接之间的间距 */
}

.nav-links a {
  /* 可选：美化链接样式 */
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
}

关键逻辑说明 #

• .site-header 设置 flex-direction: column 让Logo和导航容器垂直排列，align-items: center 保证所有内容水平居中。
• .nav-container 的 margin-top: auto 和 margin-bottom: auto 是核心：在flex垂直布局中，auto margin会自动占据剩余空间，把导航容器挤到垂直方向的中间位置。
• .logo 设置 margin-top 是为了让它和顶部保持合适间距，避免贴在导航栏最顶端。

这样调整后，就能完全满足你的需求：Logo在导航链接上方，导航链接在导航栏内垂直水平居中，导航栏固定且占满全屏高度。

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