How to make Items Alligned to center

Steve Sajeev

How to make items aligned to center the right way!

Some begginers make a mistake often, while centering objects. It's something like this:

CSS

.element {
   position: absolute;
   top: 45%;
   left: 12%;
}

Even though this makes the object in center, it won't be responsive.
If you were to change the height or width, the element would start to go in wrong positions.

Using Display Flex

The right way to make it center horizontally and vertically is to use display: flex; Here is an example:

HTML

<div>
    <h1>
        This div will be centered
    </h1>
</div>

CSS

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

In the above example, div is the container and the h1 element needs to be centered. In CSS, the display property is set to flex. So that we can have use of the properties JUSTIFY-CONTENT and ALIGN-ITEMS.

The justify-content is used align items horizontaly. And the align-items is used align items vertically.

This div will be centered

CSS - Beginner Mistake