Web: Perfectly center content in middle, but have a div on top that doesn't push content down

Question

Just learning web dev with react, so apologies if this is a basic question, but there are so many ways to do things with CSS and I'm lost.

Here is my HTML:

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

Here is my 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;
}

The css is mainly copied from create react app starter project

https://jsfiddle.net/2wz7dahq/

As you can see in the jsfiddle, having my content pushes my content down. I do not want my main content to be pushed down, I want it to be perfectly centered so if the screen is resized into any dimension it has no scroll bars or anything. This page should be a perfect single page app with no scrolling.

Answer 1

Use absolute positioning for the .center-content so that the .top-app-bar or any other elements/contents would not influence its position. As for the scrollbar, this appears because of the additional height generated by the margins. So the equation for your document height becomes: 100vh + 8px + 2vmin where 8px is the body margin coming from the user agent stylesheet & 2vmin is the margin coming from user defined CSS for the element .top-app-bar.

For that you could do any of the following:

• Get rid of the margins
• Apply overflow:hidden CSS property to prevent the scrollbar view
• or Refactor min-height to factor in the margins, e.g., min-height: calc(100vh - XXX)

In this implementation, you need to use a higher z-index for the interactive elements (for example, .top-app-bar) if the .center-content is going to take up the entire viewport (primarily mentioning this because currently it is taking up the entire viewport in your code example) because technically, it is currently at the top of the Stacking Context. Alternatively, control .center-content's height & width to not take up the entire viewport.

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>

---

React Component Below (since this is tagged as 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>