Member-only story
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…