Top Ways To Center A DIV Using CSS

Welcome Friends!!

Its a bit difficult thing to position a DIV.
So here let's take a look to top 3 ways to Center DIV :

Absolute :

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

But, There's more easy ways.

Flex :

Make the parent DIV a flexible column or row then align & justify the children in the center.

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

That's a great way. But today we can do it with less code using Grid Layout.

Grid :

Justify the parent DIV as a grid and place the items center.

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

Yes, its that much simple.

---

Thank You For You Time. Have A Good Day 🙂.