How to Center in CSS with flex?

1 min readOct 8, 2020

To wrap an item using div, just set display: flex; and justify-content: center;.

<div class="parent">
  …
</div>.parent {
  display: flex;
  justify-content: center;
}

If you’re using TailwindCSS, just add flex and justify-center classes:

<div class="flex justify-center">
  …
</div>

or using Bootstrap, just add d-flex and justify-content-center classes:

<div class="d-flex justify-content-center">
  …
</div>

Follow me on Twitter, and subscribe to my YouTube channel!

Written by Murtaja Ziad