Web：将内容完美地居中，但在顶部放置一个div，不会将内容压低

问题描述

只是学习Web开发人员的反应，如果这是一个基本问题，那么道歉，但是使用CSS进行处理的方法太多了，我迷路了。

这是我的HTML：

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

这是我的css

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

css主要是从create react app starter项目中复制的

https://jsfiddle.net/2wz7dahq/

正如您在jsfiddle中看到的那样，拥有我的内容会降低我的内容。我不希望将主要内容下推，而是希望其居中对齐，因此，如果将屏幕尺寸调整为任意尺寸，则没有滚动条或其他任何内容。此页面应该是完美的单页面应用程序，无需滚动。

解决方法

对absolute使用.center-content定位，这样.top-app-bar或任何其他元素/内容都不会影响其位置。至于滚动条，之所以出现是因为页边距产生了额外的高度。因此，文档高度的等式变为：100vh + 8px + 2vmin，其中8px是来自用户代理样式表的body边距，而2vmin是来自用户定义CSS的边距。元素.top-app-bar。

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

• 摆脱空白
• 应用overflow:hidden CSS属性以防止滚动条视图
• 或重构min-height以考虑边距，例如min-height: calc(100vh - XXX)

在此实现中，如果z-index会占据整个视口（主要是提到.top-app-bar），则需要为交互式元素（例如，.center-content）使用较高的.center-content这是因为当前它占用了代码示例中的整个视口），因为从技术上讲，它当前位于Stacking Context的顶部。或者，控制height的{​​{1}}和width不占据整个视口。

html,body {
  margin: 0;
  overflow: hidden;
}

.main {
  background-color: #212121;
  min-height: 100vh;
  color: silver;
}

.top-app-bar {
  height: 20vmin;
  margin: 2vmin;
  position: relative;
  z-index: 1;
}

.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;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

---

下面的组件（由于被标记为reactjs）

const App = () => {
  return (
    <div className="main">
      <div className="top-app-bar">
        Top App Bar
      </div>
      <p>
        Lorem Ipsum
      </p>
      <div className="center-content">
        Perfectly centered
      </div>
    </div>
  );
}

ReactDOM.render(<App/>,document.getElementById("root"));

html,body {
  margin: 0;
  overflow: hidden;
}

.main {
  background-color: #212121;
  min-height: 100vh;
  color: silver;
}

.top-app-bar {
  height: 20vmin;
  margin: 2vmin;
  position: relative;
  z-index: 1;
}

.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;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>