Put This in the Center!

Centering in CSS was long a joke topic. Let's break down how to do it right in 202X.

1. Horizontal (Classic)

For block elements with width: margin-inline: auto;. For text and inline: text-align: center;.

2. Vertical (Via Flexbox)

Most popular and reliable method today.

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

3. Absolute (If Need to " Paste " )

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

4. One Line (Grid)

Shortest path:

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