The Perfect Center

Part of the Styling with CSS section of Coddy's HTML journey — lesson 48 of 76.

In CSS, achieving the "perfect center"—centering an element both horizontally and vertically within its parent—is a common layout challenge. Flexbox provides an elegant and straightforward solution to this problem. By combining the justify-content and align-items properties, you can easily center a child element within its flex container, regardless of the child's or parent's size.

Here's how to achieve the perfect center using Flexbox:

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

To make this technique work effectively, ensure that the flex container has a defined height. If the container's height is not explicitly set, it will only be as tall as its content, and vertical centering may not be apparent.

Here's an example of how to use this technique in HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

In this example, the .container element has a height of 300px, and the .child element will be perfectly centered both horizontally and vertically within it.

Challenge

Easy

You are given an HTML document with a parent division (<div>) that contains a child division (<div>). Your task is to use Flexbox to perfectly center the child division within the parent division. Follow the steps below:

Write a CSS rule that targets the <div> element with the class parent.
Set the display property of the .parent element to flex to turn it into a flex container.
Set the justify-content property of the .parent element to center to center the child horizontally.
Set the align-items property of the .parent element to center to center the child vertically.
Give the .parent element a height of 200px to ensure vertical centering is visible.

Cheat sheet

To perfectly center an element both horizontally and vertically using Flexbox, combine justify-content: center and align-items: center:

.container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 300px; /* Define height for visible vertical centering */
}

The flex container must have a defined height for vertical centering to be apparent.

Try it yourself

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>