Flexbox has become my favorite way to center an element on a page.

You wrap an item in a div, and you set display: flex and justify-content: center.

<div class="wrapper">
.wrapper {
  display: flex;
  justify-content: center;

Using Tailwind CSS it’s easier, all you have to do is to add the flex and justify-center classes:

<div class="flex justify-center">

Download my free CSS Handbook, and check out my upcoming Full-Stack JavaScript Bootcamp! A 4-months online training program. Signups now open, until June 1!.