Centering vertically and horizontally with CSS

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

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…