DEV Community

Khushboo Chaturvedi
Khushboo Chaturvedi

Posted on

Center Items using flex-box

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.

<div class="container">
    <div class="box"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.box{
    height: 50px;
    width: 50px;
    background-color: red;
 }

.container{
    border: 2px solid black
    height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

initial container and box

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.

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

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.

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

horizontally centered

Centering Vertically

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

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

vertically centered

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.

 <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

applies on all flex-items

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

flex-direction column

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

.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
Enter fullscreen mode Exit fullscreen mode

column justify-content

.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
Enter fullscreen mode Exit fullscreen mode

column align-items

Top comments (5)

Collapse
 
devbysn profile image
snv

Very well written @khush2706 , keep it up !!

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thankyou!

Collapse
 
anjalikumawat2002 profile image
Anjali Kumawat

Well Done!!

Collapse
 
khush2706 profile image
Khushboo Chaturvedi

Thankyou😊

Collapse
 
chikucoder profile image
Ajay

Khushboo Chaturvedi