Center Items using flex-box
Tags: css, webdev
Published: 2021-10-29 08:50:35

CSS Flexbox has been out there for some time and given that you know about all its features, it could be a boon and save you a lot of time trying to align elements and making them responsive.

**Today we will see how to center elements using flexbox in just 3 lines of code!!**

First lets take a container and add a box inside it.

```html
<div class="container">
    <div class="box"></div>
</div>
```

```css
.box{
    height: 50px;
    width: 50px;
    background-color: red;
 }

.container{
    border: 2px solid black
    height: 200px;
}
```

![initial container and box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hla3by2phvpb6psld6jk.png)

In order to center the inner div we need to make the parent div a flex container.

To do so, we will use `display: flex` property for the parent container. This will make all the elements inside the container **flex-items**.

```css
.container{
    border: 2px solid black
    height: 200px;
    display: flex;
}
```



## Centering horizontally

To center our item horizontally we use the `justify-content: center;`, this will center our block along the main-axis. The direction of main-axis can be changed using the `flex-direction` property.

```css
.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
}
```

![horizontally centered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxdgldfbwaqko9e390ir.png)

## Centering Vertically

To center our item vertically we use the `align-items: center;`, this will center our block along the cross-axis. 

```css
.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

![vertically centered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nchhur1vt3fn1rxzmem8.png)

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

```html
 <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
```

![applies on all flex-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cgrxqs7g4pppfhairj7.png)

## flex-direction property

By default the flex-direction is set as row. If we change the flex-direction to column that would interchange the main-axis and the cross-axis. It will also make our items stack in a column instead of a row like before.

![flex-direction property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/427638uiy8fu6fsoo74f.png)

![flex-direction column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38rwnvrakue6y9h9qni8.png)

Hence, in this case our `justify-content` property will center the boxes vertically and `align-items` property will center the boxes horizontally.

```css
.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
```

![column justify-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sglyszj538ema82fk4h6.png)

```css
.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
```

![column align-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaly38yg82ue8z9105bu.png)