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边距选项来居中，但是它们只能让我控制水平位置，而不能控制垂直位置。

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

另外，我希望div在侧边栏折叠时向左侧伸展，在展开时使其更小。

我有这两个截图，我已经画了一个红色的正方形来展示我想要这个主要元素的位置。

请注意这些截图，我已经改变了一些资源，但问题也存在于原来的项目。

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

带折叠边栏的截图:

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

带展开边栏的截图:

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

Answer 1

这似乎可以通过样式化body的布局来解决，以包含sidebar和displaydiv，例如，也许可以尝试给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;
}

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