CSS CSS Flexbox Layout Flexbox Properties Vertical and Horizontal Centering

Question about Centering

why is it important to use both of these together ?

  • justify-content: center;
  • align-items: center

Does it make to use either justify-content or align-items?

2 Answers

Christopher Debove
Christopher Debove
Courses Plus Student 18,368 Points

More specifically :

justify-content is for the main-axis ( horizontally if flex-direction: row, and vertically if flex-direction: column)

align-items is for the cross-axis ( vertically if flex-direction: row, and horizontally if flex-direction: column)

Hope i could help you.

One aligns the items horizontally, the other vertically.

Here is a great explanation on stackoverflow.

This website shows a more practical answer http://www.sketchingwithcss.com/samplechapter/cheatsheet.html