Html 网络：完美地将内容放在中间，但在顶部有一个div，它不'；不要把内容往下推

只是用react学习web开发，如果这是一个基本问题，我深表歉意，但是有很多方法可以用CSS做事情，我迷路了

这是我的HTML：

<div class="main">
  <div class="top-app-bar">
    Top App Bar
  </div>
  <div class="center-content">
  Perfectly centered
  </div>
</div>

css主要复制自CreateReact应用程序启动程序项目

---

正如您在JSFIDLE中看到的，拥有我的内容会向下推我的内容。我不希望我的主要内容被按下，我希望它完全居中，因此，如果屏幕大小调整到任何尺寸，它没有滚动条或任何东西。此页面应该是一个完美的单页应用程序，无需滚动。

使用

绝对

定位

中心内容

，以便

顶部应用程序栏

或任何其他元素/内容不会影响其位置。至于滚动条，这是因为边距产生了额外的高度。因此，文档高度的方程式变成：

100vh+8px+2vmin

其中

8px

是来自用户代理样式表的

正文

边距&

2vmin

是来自元素

的用户定义CSS的边距。顶部应用程序栏

为此，您可以执行以下任一操作：

• 除去利润
• 应用

  overflow:hidden

  CSS属性以阻止滚动条视图
• 或者重构

  min height

  以将边距考虑在内，例如

  min height:calc（100vh-XXX）

在这个实现中，如果

.center content

将占据整个视口，则需要对交互元素（例如，

.top app bar

）使用更高的

z索引（主要提到这一点是因为当前它在代码示例中占据了整个视口），因为从技术上讲，它当前位于堆叠上下文的顶部。或者，控制
.center content
的
高度
和
宽度
以不占用整个视口


html，
身体{
保证金：0；
溢出：隐藏；
}
梅因先生{
背景色：#212121；
最小高度：100vh；
颜色：银色；
}
.顶部应用程序栏{
高度：20vmin；
保证金：2vmin；
位置：相对位置；
z指数：1；
}
.中心内容{
文本对齐：居中；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
字体大小：calc（10px+2vmin）；
颜色：白色；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}

顶部应用程序栏

乱数假文

完全居中
使用
绝对
定位
中心内容
，以便
顶部应用程序栏
或任何其他元素/内容不会影响其位置。至于滚动条，这是因为边距产生了额外的高度。因此，文档高度的方程式变成：
100vh+8px+2vmin
其中
8px
是来自用户代理样式表的
正文
边距&
2vmin
是来自元素
的用户定义CSS的边距。顶部应用程序栏

为此，您可以执行以下任一操作：


除去利润
应用
overflow:hidden
CSS属性以阻止滚动条视图
或者重构
min height
以将边距考虑在内，例如
min height:calc（100vh-XXX）

在这个实现中，如果
.center content
将占据整个视口，则需要对交互元素（例如，
.top app bar
）使用更高的
z索引（主要提到这一点是因为当前它在代码示例中占据了整个视口），因为从技术上讲，它当前位于堆叠上下文的顶部。或者，控制
.center content
的
高度
和
宽度
以不占用整个视口


html，
身体{
保证金：0；
溢出：隐藏；
}
梅因先生{
背景色：#212121；
最小高度：100vh；
颜色：银色；
}
.顶部应用程序栏{
高度：20vmin；
保证金：2vmin；
位置：相对位置；
z指数：1；
}
.中心内容{
文本对齐：居中；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
字体大小：calc（10px+2vmin）；
颜色：白色；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}

顶部应用程序栏

乱数假文

完全居中
但是如果用户调整了应用程序的大小怎么办？它应该如何处理？“如果他们把屏幕弄得足够小，以至于所有的东西都不能放在屏幕上怎么办？”TheGrandJ说，在这种情况下，我可以接受。中间的内容基本上是一个词“是”或“否”，所以我希望它是死的中心。也许使用<代码>绝对/代码>定位为<代码>中心内容< /代码>，但是如果用户调整了应用程序的大小怎么办？它应该如何处理？“如果他们把屏幕弄得足够小，以至于所有的东西都不能放在屏幕上怎么办？”TheGrandJ说，在这种情况下，我可以接受。中间的内容基本上是“是”或“否”一个字，所以我希望它是死的中心。也许使用<代码>绝对/代码>定位<代码>。中心内容< /代码>很棒。我想这能让我达到我所需要的程度。感谢@95FAF8E76605E973对您的欢迎。请注意我的
z-index
/Stacking上下文解释-我认为这对实现非常重要。我想这能让我达到我所需要的程度。感谢@95FAF8E76605E973对您的欢迎。请注意我的
z-index
/Stacking上下文解释-我认为这对实现非常重要
.main {
  background-color: #212121;
}

.top-app-bar {
  height: 20vmin;
  margin: 2vmin;
}

.center-content {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}