CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Vertically Center a DIV in React With CSS
slug: cover-component
description: In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/je2v21ji6h
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_04
---

Vertical centering has long been considered the holy grail of CSS. This has been the case even though there have been multiple ways to do it. What was coveted was a single property that you could set that would automatically center items vertically, which we now have in both CSS Flexbox and CSS Grid.

In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.

## The problem: the Simple Hero

In this lesson, we are going to build the following Hero section:

![The Hero red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-red-line.png)

In this Hero section, we have a top and bottom section and a vertically centered section in the middle. A gutter separates all three sections, and padding is added around the entire Hero section.

## The solution

Here is how our code starts out. [You can follow along at the codesandbox.io starter project](https://codesandbox.io/s/the-hero-starter-cbrid?file=/src/Hero.jsx):

```jsx { actualFilename=./protected/cover-0.js endLine=31 startLine=7 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.04/protected/cover-0.js#L7 }
export default function Hero() {
  return (
    <div>
      <InlineCluster gutter="xl" justify="end">
        <span>Places to stay</span>
        <span>Popular experiences</span>
        <span>Manage your booking</span>
        <span>List your property</span>
      </InlineCluster>

      <Stack gutter="lg">
        <h1>Home4Hire</h1>
        <span>Stay here and relax</span>
        <InlineCluster gutter="lg">
          <Button primary>Get started</Button>
          <Button>Sign in</Button>
        </InlineCluster>
      </Stack>

      <InlineCluster gutter="xl" justify="center">
        <a href="/#">Keep Reading to learn more</a>
      </InlineCluster>
    </div>
  );
}
```

And this is how it looks:

![The Hero step-0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-0.png)

For the time being, let's remove the top and the bottom and focus on just centering the middle section. We can do it like this:

```jsx { actualFilename=./protected/cover-1.js endLine=17 startLine=8 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.04/protected/cover-1.js#L8 }
const Cover = styled.div`
  display: grid;
  min-height: 100vh;

  grid-template-rows: 1fr;

  > * {
    align-self: center;
  }
`;
```

By default, elements are only as tall as the content. First, we are setting the display to `grid` and the `min-height` to `100vh`, which is 100 percent of the viewport height. To center something vertically, we need vertical space for it to be vertically centered. If we were to set just a `height`, that would create an overflow if the content happened to be larger than the viewport. Setting a `min-height` instead gives us the white space we are looking for but still allows the element to grow if needed.

Next, we are setting the `grid-template-rows` to `1fr`. We already used `grid-template-columns` in a few of the spacer primitives. `grid-template-rows` is just the same, except in the vertical direction.

Finally, we are using the direct child selector to set the children's alignment to the center.

Now we can use the Cover like this:

```jsx
<Cover>
  <Stack gutter="lg">
    <h1>Home4Hire</h1>
    <span>Stay here and relax</span>
    <InlineCluster gutter="lg">
      <Button primary>Get started</Button>
      <Button>Sign in</Button>
    </InlineCluster>
  </Stack>
</Cover>
```

(We are ignoring the top and bottom sections for now)

This is what that looks like:

![The Hero step-1](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.04/public/assets/cover-1.png)

If all we had to do was vertically center a child, we would be done. Unfortunately, it's not that simple. We need to be able to position items above and below, conditionally. The top and bottom need to grow naturally based on their content, but the children need to stay in the center of the remaining vertical space.

To achieve this we are going to use composition via props. In React it is common to see this pattern:

In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.