3 Easy Ways to Center Your Div

Ever found yourself wrestling with div alignment? Fear not! Here are three simple techniques to center them perfectly. Say farewell to those wandering divs and get ready to nail down their rightful place. Let's dive in

Setting the Stage: Initial Code Setup

Before we dive into the methods of centering divs, let's set up our workspace. We'll create a simple HTML structure with a parent div and a child div inside it, and apply basic styling to lay the foundation for our centering techniques.

Something like this:

    <div class="parent">
        <div class="child">
        </div>
    </div>

style it little bit:

    body{
        margin: 0;
        padding: 0;
    }

    .parent{
        background-color: #D20062;
        width: 100%;
        height: 100vh;
    }

    .child{
        width: 300px;
        height: 300px;
        background-color: #97E7E1;
    }

now our page will look like this:

lets start centering 🚀

• Method 1: Absolute Positioning with Transform Translation

First we'll position the child as absolute. By setting the child's position to absolute, it is positioned relative to its closest positioned ancestor, which is parent container here.

now set the top and left properties to 50%, which will move the top-left corner of the child div to the center of the parent container:

we'll finaly center the div by using the transform property with the translate function and adjust the child's position by shifting it by -50% of its own width and height, effectively centering it both horizontally and vertically within the parent container.

    .child{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

and our child div will be centered 🎉

---

• Method 2: Flexbox Magic

Here unlike the first method, we'll apply properties to our parent div.

Set the parent's display property to flex, it will make it a flex container. This allows the child div to be flex items, enabling different alignment control.

Then set align-items property to center, which will vertically aligns the child div within the parent div.

Now just set the justify-content property to center, which will horizontally aligns the child div within the parent div.

    .parent{
        display: flex;
        align-items: center;
        justify-content: center;
    }

and our child div is again at center 😀

---

• Method 3: Unlocking the Potential of CSS Grids

Similar to second method, here all the properties will be applied to parent div.

Set the parent's display property to grid, and set the place-items property to center, which is a shorthand for align-items: center and justify-items: center. This centers the child div both horizontally and vertically within the grid container.

    .parent{
        display: grid;
        place-items: center;
    }

and our child div is at center 🥳

---

So there you have it! Three easy-peasy ways to center your divs. Hope you have learned something.😊

Thanks for reading along! Happy coding!