How to Center a Div in Flexbox
There are many ways to center things in CSS, but CSS Flexbox is one of the simplest. CSS Flexbox is a layout model that aids in the alignment of one-directional items. In this short post, we’ll look at how to center items both horizontally and vertically.
To center the Div element
- We use the property of display set to flex –
display: flex;
- Align items to center using –
align-items: center;
- The last step is to set justify-content to center –
justify-content: center;
Main Axis and Cross Axis
- All flex boxes have a direction, in this case it’s horizontal starting from the left side to the right
- The main axis goes from left to right
- The cross axis is top to bottom

To center our box we use the align-items
property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content
to align the item on the main axis, which in this case is the inline axis running horizontally.
It is also important to add a height to the container of your div. For example height: 100vh
. vh
unit stands for viewport height. Specifying 100vh is equivalent to occupying 100% of entire visible screen height.
Code
<div class="box">
<div></div>
</div>
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box div {
width: 200px;
height: 200px;
border: 2px solid #0b2535;
border-radius: 5px;
background-color: #e2ecee;
}
Output

Conclusion
The properties we have covered in this guide are as follows:
- display: flex – This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
- align-items – controls alignment of all items on the cross axis.
- justify-content – controls alignment of all items on the main axis.
Further reading
To align-items in different ways check out align-items | CSS-Tricks – CSS-Tricks
See also
How do you use Cascading Style Sheets (CSS)?
What are the 4 properties in a CSS Box Model?
What are CSS Rules and Selectors?
If you liked this article, then please share. You can also find me on Twitter for more updates.