HTML 我的项目中的div卡在底部，如何居中？

Question

我刚刚克隆了这个github-sidebar-project当我试图在页面主体添加一个 div 元素时，它粘在页面底部，我必须滚动到它。 此外，侧边栏在我的 div 开始时结束。

这是我在正文中使用的 HTML 代码：

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

CSS 代码：

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;
}

我尝试通过尝试所有 CSS 边距选项来将其居中，但它们只会让我控制水平 position 而不是垂直。

有了这个，我试图添加一个主要元素，其中所有内容都将显示在侧边栏上的不同选项。

另外，如果侧边栏折叠，我希望 div 伸展到左侧，并在展开时使其变小。

我有这 2 个屏幕截图，我在其中绘制了一个红色方块来展示我希望这个主要元素所在的位置。

请注意这些屏幕截图，我已经更改了一些资源，但问题也存在于原始项目中。

（对不起，我没有足够的声誉直接发布这些图片）

带有折叠边栏的屏幕截图：

https://media.discordapp.net/attachments/1036248150907826282/1048229904124215356/Screenshot_2022-12-02_at_14-30-17_Cashylte.png?width=878&height=440

展开侧边栏的屏幕截图：

https://media.discordapp.net/attachments/1036248150907826282/1048229335548559390/Screenshot_2022-12-02_at_14-25-12_Cashylte.png?width=878&height=440

Answer 1

似乎这可以通过对body的布局进行样式设置以包含sidebar和display div 来解决，例如，也许可以尝试给body一个网格布局：

body {
  display: grid;
  /* 👇 Column names are optional and added just so it is more clear here */
  grid-template-columns: [side-start] min-content [side-end main-start] 1fr [main-end];
}

并指定display取main列：

.display {
  /* 👇 Specify this to be placed in the main column */
  grid-column: main;
  color: #ff328e;
  text-align: center;
  background: rgba(10, 10, 10, 0.65);
  box-shadow: 0 8px 32px rgb(2, 4, 24);
  border: 2px solid rgba(255, 255, 255, 0.09);
  padding: 10px;
}

可能有更简单的方法或其他需要解决的问题，但希望这仍然可以作为参考。