How to Center a Div in Flexbox

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.