How to make a div(web element) center

If you are a full-stack or frontend developer you definitely faced this situation where you need to make the element in the center of the parent vertically and horizontally, there are many ways to do it.
Let me just write three ways how you can do it.

Considering the above image we have an idea of what parent and child mean.

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

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

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

Hope this helps someone
Happy Coding 🫶