CSS侧边栏Logo居中问题：展开正常折叠失效的解决问询

克隆并修改「Responsive Glass Sidebar using CSS and JavaScript」项目后，遇到Logo居中异常问题：

• 侧边栏展开状态：Logo在侧边栏内可正常水平+垂直居中
• 侧边栏折叠状态：Logo居中失效，出现偏移

（截图说明：展开状态下侧边栏宽度较宽，Logo位于侧边栏顶部居中位置；折叠状态下侧边栏收窄为窄条，Logo偏离中心位置）

需求：实现侧边栏展开、折叠两种状态下，Logo始终在侧边栏内保持居中。

附带测试代码：

CSS 测试代码 #

.display {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

HTML 测试代码 #

<div class="display">
  Hello world
</div>

针对原项目结构，修改Logo容器的CSS样式，确保两种状态下都能稳定居中：

1. 找到侧边栏内Logo对应的容器元素（原项目中为.logo类），添加以下样式：

.logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px; /* 可根据原项目侧边栏顶部高度调整 */
}

2. 补充折叠状态下的适配样式，避免原有样式覆盖居中逻辑：

.sidebar.close .logo {
  width: 100%;
  justify-content: center;
}

原理说明 #

• Flex布局的justify-content: center（水平居中）和align-items: center（垂直居中）不受容器宽度变化影响，是稳定的居中方案
• 固定Logo容器高度，避免侧边栏折叠时高度收缩导致垂直居中偏移
• 针对折叠状态强制Logo容器占满宽度，确保居中逻辑生效

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