Grid: Vertical Centering on a Full Screen Background

Topics Covered in This Web Development Tutorial:

Vertically Aligning Content with Grid

Exercise Preview

Exercise Overview

In this exercise you’ll use grid to center content vertically (and horizontally) in the screen. This is the accomplishing same thing we did in a earlier exercise with flexbox, but now you’ll see how to do it with grid.

Getting Started

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Grid Vertical Centering folder located in Desktop > Class Files > yourname-Flexbox Grid Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Grid Vertical Centering folder.

4. Preview index.html in a browser.

   • The photo background covers the full width and height of the window, but we want to center the content inside it.
5. Leave index.html open in the browser as you work, so you can reload the page to see the code changes you’ll make.
6. Switch back to your code editor.
7. Find the header tag.

8. Inside that, notice the heading and anchor tags. These are the elements we will be targeting.

Vertically Centering the Header Content

1. Open main.css from the css folder (from the Grid Vertical Centering folder).

2. In the header rule, add the following bold code:

   header {

   Code Omitted To Save Space

   min-height: 100vh;
      display: grid;
      grid-template-rows: auto 60px;
      justify-items: center;
      align-items: center;
   }

   NOTE: We need 2 rows: one for the heading (the auto height) and another for the scroll down arrow (the 60px height). We made the arrow row 60px high because the arrow is 40px tall and we wanted 20px of space below it.

3. Save the file, and reload the page in your browser.

   • That’s looking good already, but a few tweaks are needed to perfect it.
   • Currently the arrow is vertically centered in the 60px row, so it only has 10px below it. We want to align it to the top of the row so all 20px is below it.
   • Make the window narrow, so you can see the heading text is not centered on mobile screens (because the default text alignment is left). Let’s center the text.
4. Switch back to your code editor.

5. In the h1 rule, add the following bold code:

   h1 {

   Code Omitted To Save Space

   margin: 0;
      text-align: center;
   }

6. Save the file, and reload the page in your browser.

   • The heading is now centered on mobile screens.
7. Switch back to your code editor.

8. In the .scroll-down rule, add the following bold code:

   .scroll-down {

   Code Omitted To Save Space

   opacity:.6;
      align-self: start;
   }

9. Save the file, and reload the page in your browser.

   • Now the arrow is at the top of the 60px row, so the 40px arrow now has 20px of space below it. That’s better.
   • The heading is now vertically centered between the top of the page and the scroll down arrow. That means the heading is not fully centered in the screen (it’s a little too high). It looks OK, but let’s see how to vertically center it perfectly in case that’s what you prefer.
10. Return to your code editor.

11. In the header rule add the following bold code to adjust the spacing:

    header {

    Code Omitted To Save Space

    align-items: center;
       padding-top: 60px;
    }

12. Save the file, and reload the page in your browser.

    • Perfect! Resize the window from mobile through desktop size to check out your full screen background with centered content!