Skip to main content
Dan Rodney/3 min read

Grid: Vertical Centering on a Full Screen Background

Grid Vertical Centering

1

Use min-height: 100vh on the Container

Makes the header fill the viewport height.

2

Set display: grid

Enables grid layout on the container.

3

Define Rows

grid-template-rows: auto 60px — auto for content, 60px for the scroll arrow.

4

Center with justify-items + align-items

Both set to center for horizontal and vertical centering of grid items.

Master Web Development at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate covers HTML, CSS, JavaScript, and the modern web stack.

Explore this in-depth web development tutorial on vertically aligning content with the grid, a crucial part of creating responsive, visually appealing websites.

Topics Covered in This Web Development Tutorial:

Vertically Aligning Content with Grid

Exercise Preview

full screen bg done

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!