How to Center a Div Horizontally and Vertically using CSS Flexbox

Hima varshini Yaleru — Sun, 23 Aug 2026 07:25:19 +0000

Introduction

Aligning and centering design elements inside a web page used to require complex CSS hacks, precise pixel margins, or absolute positioning formulas. With the arrival of the CSS Flexbox Layout, centering child elements has become robust, responsive, and requires only three fundamental rules on the parent container.

The Core Principle

To properly align a 'div' using Flexbox, you must activate the layout engine on the parent element (the container holding the item) rather than writing layout instructions on the child element itself.

Key CSS Properties Required

display: flex; — This initializes the flex formatting context for all direct children.
justify-content: center; — This aligns child items precisely in the center along the horizontal main axis.
align-items: center; — This aligns child items perfectly in the center along the vertical cross axis.

Practical Implementation Code

Below is a clean, modern HTML5 and CSS structure you can use to center any element. You can copy and test this directly inside your local VS Code setup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Centering Elements with CSS Flexbox</title>
    <style>
        .flex-parent {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* Fills full viewport height */
            background-color: #f7f9fa;
        }
        .flex-child {
            padding: 30px 50px;
            background-color: #007bff;
            color: #ffffff;
            font-family: Arial, sans-serif;
            border-radius: 6px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <div class="flex-parent">
        <div class="flex-child">Perfectly Centered Content!</div>
    </div>

</body>
</html>

Code Walkthrough