LabEx
Log InJoin Free

Centered Grid Layout Mastery

Beginner

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore the concept of grid centering using CSS. You will learn how to horizontally and vertically center a child element within a parent element using the grid layout. By the end of this lab, you will have a solid understanding of how to use justify-content and align-items properties to create a perfectly centered layout.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 100% positive review rate from learners.

Grid Centering

index.html and style.css have already been provided in the VM.

To center a child element both horizontally and vertically within a parent element, follow these steps:

  1. Create a grid layout using display: grid.
  2. Use justify-content: center to center the child horizontally.
  3. Use align-items: center to center the child vertically.

Here's an example HTML structure:

<div class="parent">
  <div class="child">Centered content.</div>
</div>

And the corresponding CSS:

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Grid Centering lab. You can practice more labs in LabEx to improve your skills.