justify-content & align-items

justify-content (main axis)

Value	Description
`flex-start`	Pack items to the start (default)
`flex-end`	Pack to the end
`center`	Center items
`space-between`	Even gaps between items, no edge gap
`space-around`	Even gaps around items
`space-evenly`	Perfectly equal gaps everywhere

align-items (cross axis)

Value	Description
`stretch`	Stretch to fill container (default)
`center`	Center on cross axis
`flex-start`	Align to start
`flex-end`	Align to end

💡 Perfect centering: justify-content: center; align-items: center;

Example

/* Perfect center */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* Navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned