How to Center a Div using CSS ?

Centering an <div> element both vertically and horizontally can be tricky, but fear not! In this complete guide, we’ll explore various techniques to achieve perfect alignment. This center align div article, Includes using flexbox properties, positioning and translate, and the calc() function.

Approaches to Center a div

1. By Using Basic CSS Properties

In the below Example, we will learn to align a div in the center by CSS properties. We need to create a div with center alignment and include <h2> and <p> tags inside. Check the code below to understand better.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            body {
                width: auto;
                height: 100vh;
            }

            div {
                width: 50%;
                margin: auto;
                height: auto;
                background-color: rgba(
                    20,
                    220,
                    43,
                    0.267
                );
                padding: 1rem;
                border-radius: 0.5rem;
            }
        </style>
    </head>

    <body>
        <div>
            <h2 style="color: green">
                GeeksforGeeks
            </h2>
            <p>
                GeeksforGeeks is the
                most-recommended platform for all
                CS/IT Students.
            </p>
        </div>
    </body>
</html>

Output:

Center a div using CSS

2. Using Flexbox Properties

Apply the flexbox properties to the parent container (In this example, apply in body).
These properties will automatically center the child <div> element.

body {
            display: flex;
            align-items: center;
            justify-content: center;

            width: auto;
            height: 100vh;
}

Example: Using CSS flexbox properties to align the <div> to the middle of the HTML page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            width: auto;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            width: 50%;
            height: auto;
            background-color: rgba(20, 220, 43, 0.267);
            padding: 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        
        <p>
            GeeksforGeeks is the most-recommended
            platform for all CS/IT Students.
        </p>
    </div>
</body>
</html>

Output:

Center div using flexbox property

Explanation:

We’ve created a simple HTML structure with a centered <div> containing an <h2> and a <p> tag.
By applying flexbox properties (display: flex; align-items: center; justify-content: center;) to the <body>, we achieve both vertical and horizontal centering.

3. Using Position and Transform

Use transform: translate(); and position: relative; properties.
Shift the element 50% from the top and 50% from the left to align it at the center.
Apply the following properties on the <div> element:

div {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

Example: Let's use the above-discussed properties and align <div> horizontally and vertically center.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        div {
            width: 500px;
            height: 120px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(20, 220, 43, 0.267);
            padding: 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        
        <p>
            GeeksforGeeks is the most-recommended
            platform for all CS/IT Students.
        </p>
    </div>
</body>
</html>

Output:

Center div using position relative

Explanation:

The <div> is positioned 50% from the top and 50% from the left.
The transform: translate(-50%, -50%); centers it both vertically and horizontally.

4. Center div using calc() function

Use calc() function: The calc() function in CSS does calculations based on the values of their parent element or the values provided by the user during the calculation.
The following CSS using calc to measure the position from top and left.

div {
            position: fixed;
            top: calc(50% - 150px/2);
            left: calc(50% - 150px/2);
}

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
        }

        div {
            position: fixed;
            top: calc(50% - 150px/2);
            left: calc(50% - 150px/2);
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            text-align: center;
            padding: 20px;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>

        <p>
            GeeksforGeeks is the most-recommended
            platform for all CS/IT Students.
        </p>
    </div>
</body>
</html>

Output:

Explanation:

We set the <body> to occupy the entire viewport height (100vh) and use flexbox to center its content both vertically and horizontally.
The child <div> is positioned absolutely within the <body>.
The calc() function is not explicitly used here, but it’s a powerful tool for dynamic calculations. You can apply it to adjust dimensions, margins, or other properties as needed.

Article Tags :

CSS

Web Technologies

CSS-Questions