How to Center in CSS with Flexbox
Tags: css, flexbox
Published: 2020-03-19 20:04:02

---
title: How to Center in CSS with Flexbox
published: true
description: Learn how to center content like images, text and divs vertically and horizontally in CSS using Flexbox.
tags: css, flexbox
canonical_url: https://coryrylan.com/blog/how-to-center-in-css-with-flexbox
---

There are many ways to center things in CSS but one of the easiest ways is to use CSS Flexbox. CSS Flexbox is a layout model that helps align one directional items. This short post we will take a look at how to center items not only horizontally but also vertically.

First we will start simple with wanting to center a single item in a parent container.

```html
<section>
  <div>1</div>
</section>
```

```css
section {
  width: 200px;
  border: 1px solid #2d2d2d;
}

div {
  color: #fff;
  background: #2d2d2d;
  padding: 12px;
  display: inline-block;
}
```

<img src="https://coryrylan.com/assets/images/posts/2020-02-29-how-to-center-in-css-with-flexbox/centering-in-css-flexbox-1.png" alt="Inline block item to be centered with CSS Flexbox" >

To center the inner `div` element we will make the parent a flex container.

```css
section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
}
```

By adding the `display: flex;` property we make the `section` element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the `justify-content: center;`. The `justify-content` property allows us to position items along the [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) of the flex container. This the main axis can change dependent on the [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).

<img src="https://coryrylan.com/assets/images/posts/2020-02-29-how-to-center-in-css-with-flexbox/centering-in-css-flexbox-2.png" alt="Inline block item centered with CSS Flexbox">

The `justify-content` property also has the `start`, `end` and `stretch` that can position items along the main axis.

## Centering Vertically

Now we have our element centered horizontally we can center our element vertically. Let's increase our parent container to be 200px high.

<img src="https://coryrylan.com/assets/images/posts/2020-02-29-how-to-center-in-css-with-flexbox/centering-in-css-flexbox-3.png" alt="Inline block item to be vertically centered with CSS Flexbox">

Not quite what we expect. By default flex items will fill vertical space of their parent element. To vertically center our `div` we can add a single CSS property.

```css
section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

By using `align-items: center` we can vertically center all flex items to the parent container along the [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) of the flex container.

<img src="https://coryrylan.com/assets/images/posts/2020-02-29-how-to-center-in-css-with-flexbox/centering-in-css-flexbox-4.png" alt="Inline block item to be vertically centered with CSS Flexbox">

The nice aspect of flexbox is the styles apply to all children of our flex container. If we add two more elements they all stay centered within the parent `select`.

```html
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
```

<img src="https://coryrylan.com/assets/images/posts/2020-02-29-how-to-center-in-css-with-flexbox/centering-in-css-flexbox-5.png" alt="Inline block item horizontally centered with CSS Flexbox">

Check out the [full working demo](https://stackblitz.com/edit/js-1dnnku) and center all the things!