克隆响应式玻璃侧边栏项目后，如何居中底部Div并适配侧边栏状态？

问题背景 #

我克隆了一个响应式玻璃侧边栏项目，在页面body中添加了内容展示元素：

<div class="display">Display</div>

并给它设置了如下样式：

body .display {
    margin: auto;
    color: #ff328e;
    text-align: center;
    width: 50%;
    background: rgba(10, 10, 10, .65);
    box-shadow: 0 8px 32px rgb(2, 4, 24);
    border: 2px solid rgba(255, 255, 255, .09);
    padding: 10px;
}

添加后遇到了几个问题：

• 这个.display元素被挤到页面底部，必须滚动才能看到
• 侧边栏的高度只到这个元素的起始位置就结束了
• 用margin只能调水平位置，没法让它垂直居中

我想要实现的效果是：

• 把.display作为侧边栏选项对应的主内容展示区
• 侧边栏折叠时，这个元素自动向左扩展占满剩余空间；侧边栏展开时，它的宽度自动缩小适配

解决方案 #

1. 重构页面整体布局 #

先把页面设置为flex布局，让侧边栏和内容区并排，同时确保内容区占满视口高度：

body {
    display: flex;
    min-height: 100vh;
    margin: 0; /* 清除默认边距 */
}

2. 重置内容展示区样式 #

去掉固定宽度，改用flex布局实现垂直居中，同时占满侧边栏之外的所有空间：

.display {
    flex: 1; /* 自动占据剩余空间 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    color: #ff328e;
    background: rgba(10, 10, 10, .65);
    box-shadow: 0 8px 32px rgb(2, 4, 24);
    border: 2px solid rgba(255, 255, 255, .09);
    padding: 10px;
    margin: 0; /* 移除原来的auto margin */
}

3. 适配侧边栏折叠/展开状态 #

原项目应该是通过给侧边栏添加特定类（比如close）实现折叠，我们可以利用这个类确保内容区自动适配宽度：

/* 确保侧边栏高度占满视口 */
.sidebar {
    min-height: 100vh;
}

/* 侧边栏展开/折叠时，内容区自动适配剩余空间（flex布局会自动处理，这里可以根据需要加额外间距） */
.sidebar.close ~ .display {
    /* 如果需要和折叠的侧边栏留间距，可以加margin-left: 10px; */
}

这样修改后，.display会和侧边栏并排，垂直居中显示在页面里，并且能随着侧边栏的折叠/展开自动调整宽度，完全符合需求。

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