我的项目中的 HTML Div 粘在底部，如何居中？答案

【问题标题】：HTML Div in my project sticks to the bottom, how to center it?我的项目中的 HTML Div 粘在底部，如何居中？
【发布时间】：2022-12-03 06:17:42
【问题描述】：

我刚刚克隆了这个 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 向左侧伸展，并在展开时使其变小。

我有这 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

【问题讨论】：

标签： javascript html css

【解决方案1】：

看起来问题可能与 .display 元素的定位有关。在 CSS 中，元素的默认位置是静态的，这意味着它们将根据页面的正常流动进行定位。这就是 .display 元素出现在页面底部并导致侧边栏结束的原因。

要解决此问题，您可以尝试为 .display 元素指定不同的位置，例如相对、绝对或固定。例如：

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;
  position: relative; /* or absolute, fixed, etc. */
}

使用不同的位置将允许您控制 .display 元素在页面上的位置并防止它干扰侧边栏。您可能还需要调整 .display 元素的 z-index 属性以确保它显示在侧边栏上方。

我希望这有帮助！如果您有任何其他问题，请告诉我。

【讨论】：