DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Murtaja Ziad
Murtaja Ziad

Posted on • Originally published at blog.murtajaziad.xyz on

How to Center in CSS with flex?

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

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

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

<div class="flex justify-center">
  …
</div>
Enter fullscreen mode Exit fullscreen mode

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

<div class="d-flex justify-content-center">
  …
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
ceghap profile image
Ashraf Latif

add align-items: center; to make it center verticaly πŸ™‚

🌚 Life is too short to browse without dark mode