# How to align center in flexbox

> Learn how to center an element with flexbox by setting display flex and justify-content center on its container, or Tailwind flex and justify-center classes.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-04-28 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/flexbox-center/

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`.

```html
<div class="wrapper">
  ...
</div>
```

```css
.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:

```html
<div class="flex justify-center">
   ...
</div>
```

If you want to experiment with the other alignment properties too, try my free [flexbox playground](https://flaviocopes.com/tools/flexbox-playground/).