DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

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

Main Axis and Cross Axis of Flexbox

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

output

Centered Div Element

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.

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.

Top comments (1)

Collapse
 
nickap profile image
nickap • Edited on

Nice!
It's worth mentioning that if we have only one flex-item we want to center, like in the example, we can just use margin:auto in that item, to center on "flex-item level". Of course, then we wouldn't use align-items: center; justify-content: center; in the container because we don't center on "flex-container level"!

Join us at DEV
Yes, this is technically an β€œad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you. Β  Create an account and continue your coding journey.