Centering in CSS 🍹 HTMLcat

Centering in CSS

An enduring meme about CSS is the supposed difficulty of centering an element. This challenge was real before the advent of flex, widely supported since 2013, and CSS Grid. However, with modern CSS, centering elements has become straightforward.

Today, there are several ways to center elements using flex and grid. The most concise solution uses grid and requires only two (!) lines of code.

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

An equivalent solution with flex requires only one more line.

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

Part of the problem in my opinion was given by the infamous "vertical-align" property, which, however, only affects inline elements, and therefore does not produce the effect suggested by its name.

Some more info on MDN.