Center an element vertically and horizontally

There're different ways to center a given element in both directions.

.container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    display: grid;
    place-content: center;
}

We position the child element absolutely to the parent element.

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