Center an element vertically and horizontally

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

Using flexbox

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

Using grid

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

Using positions

We position the child element absolutely to the parent element.
.parent {
position: relative;
.child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);