Flexbox items not centering

Your flex container isn’t centering items as expected.

Fix 1: Center both axes

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 100vh;           /* needs a height! */
}

Fix 2: The container needs a height

/* ❌ No height — nothing to center within */
.container {
  display: flex;
  align-items: center;
}

/* ✅ Give it a height */
.container {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

Fix 3: Use margin auto

.child {
  margin: auto; /* Centers in both directions inside flex */
}

Related resources

• CSS Flexbox & Grid cheat sheet
• CSS complete guide