css - 网页中心框

Question

我写了一个很小的网站，可以在这里找到。一切都按预期工作，除了两个问题：

• 理想情况下，该框应该位于页面的中心（在它和导航栏之间有一点填充，在它和底部之间有一些填充）
• 底部不应有空格（particle.js 背景应跨越整个网页）

不幸的是，我不是一个非常有经验的 Web 开发人员，所以我无法解决这个问题。这是相关的HTML：

<div class="stage">
  <div id="particles-js"></div>
  <div class="container">
    <div class="box">
      <span>Hello, world!</span>
    </div>
  </div>
</div>

和CSS：

body, html {
    height:100%;
    width: 100%;
}

.stage {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: black;
}

#particles-js {
    position: sticky;
    height: 100%;
}

.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-container: center;
    justify-content: center;
    max-width: 60%;
    max-height: 60%;
}

.box {
    align-self: center;
    background-color: black;
    color: white;
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    border: solid green;
    text-align: center;
}

谢谢！

标签： cssflexboxcentering

Answer 1

我编辑了下面的 2 个 css 代码。希望这是你需要的。

.stage {
position: relative;
background-color: black;
}

.box {
align-self: center;
background-color: black;
color: white;
position: absolute;
left: 20%;
right: 20%;
top:50%;
border: solid green;
text-align: center; 
}