Centering vertically and horizontally with CSS

A chronological view of how content was centered in HTML in the past and now.

Alvaro Montoro
5 min readJan 7, 2022

This article will show five different ways of centering vertically and horizontally with HTML+CSS, presented in chronological order: from how it was done in the past (which we should avoid now) to the modern ways of centering content in the present.

If you prefer to watch a video version of this article, visit my YouTube channel:

There may be other ways of centering (e.g., using margin: auto), but for simplicity and to give some background on how things have evolved, I'm going to center only on these five:

  • Using tables
  • Using negative margins
  • Using translations
  • Using Flexbox
  • Using Grid

During our interview process, I asked candidates to center vertically and horizontally an element on the page, and most people could not give a proper answer. Hopefully, this article will help…

--

--

Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro