How to Center a Div Horizontally and Vertically in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Centering a div both horizontally and vertically is a common requirement in web design. Whether it's for a loading spinner, a modal, or content that needs to be perfectly centered, there are simple ways to achieve this.

In this tutorial, you will learn three easy methods to center a div horizontally and vertically using Flexbox, CSS Grid, and positioning with transforms.

Method 1: Using Flexbox

Flexbox is a quick and reliable way to center elements in CSS. With a few properties, you can easily center any div both horizontally and vertically.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;  /* Centers horizontally */
            align-items: center;      /* Centers vertically */
            height: 100vh;            /* Full viewport height */
            background-color: #f0f0f0;
        }

        .centered-div {
            width: 200px;
            padding: 20px;
            background-color: #3498db;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="flex-container">
        <div class="centered-div">I'm centered!</div>
    </div>

</body>
</html>

Explanation

justify-content: center: This centers the div horizontally within the container.
align-items: center: This centers the div vertically within the container.
height: 100vh: The container spans the full height of the viewport, ensuring that the div is vertically centered.

Method 2: Using CSS Grid

CSS Grid offers another easy way to center a div. With just one property, you can center an element both horizontally and vertically.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with CSS Grid</title>
    <style>
        .grid-container {
            display: grid;
            place-items: center;  /* Centers both horizontally and vertically */
            height: 100vh;
            background-color: #f4f4f4;
        }

        .centered-div {
            width: 200px;
            padding: 20px;
            background-color: #e74c3c;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="grid-container">
        <div class="centered-div">I'm centered with Grid!</div>
    </div>

</body>
</html>

Explanation

place-items: center: This property centers the content inside the grid container both vertically and horizontally in one step.
height: 100vh: This ensures that the grid container takes up the full height of the viewport.

Method 3: Using Positioning and Transforms

For older layouts or when more manual control is needed, positioning combined with transforms can be used to center a div.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center a Div with Positioning</title>
    <style>
        .container {
            position: relative;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .centered-div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            padding: 20px;
            background-color: #2ecc71;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="centered-div">I'm centered with positioning!</div>
    </div>

</body>
</html>

Explanation

top: 50%; left: 50%: This positions the div at the center point of the container.
transform: translate(-50%, -50%): This offsets the div by half its own width and height to achieve perfect centering.

Conclusion

In this tutorial, we explored three methods for centering a div both horizontally and vertically: Flexbox, CSS Grid, and positioning with transforms. Flexbox and Grid offer simple, modern solutions, while positioning is useful for custom or older layouts. You can choose the method that best suits your project's needs.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog