How to Make a Horizontally and Vertically Centered Div

Creating a website is fun, but for people who are used to working on the backend, sometimes it can be frustrating when they have to make centered div. This time, I want to share 3 methods to center a div.

Using FlexBox

.container-1 {
    height: 20vh;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

Using Grid

.container-2 {
    height: 20vh;
    border: 1px solid red;
    display: grid;
    place-items: center;
}

Using Absolut Positioning

.container-3 {
    position: relative;
    border: 1px solid red;
    height: 20vh;
}

.container-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

Which one is your favorite? Please leave a comment.