Div Centering Wizardry

Explore powerful techniques to center elements with precision and elegance

Flexbox: The Flexible Friend

Flexbox is like a yoga instructor for your divs - helping them find their center with grace and flexibility!

// Flexbox Centering Magic 🪄
.parent {
  display: flex;
  justify-content: center;  // Horizontal centering
  align-items: center;      // Vertical centering
}

CSS Grid: The Architectural Mastermind

CSS Grid treats your layout like a meticulously planned city - everything has its perfect place!

// Grid Centering Wizardry 🧙‍♂️
.parent {
  display: grid;
  place-items: center;  // One-line centering magic!
}

Absolute Positioning: The Rebel Technique

Absolute positioning is like a GPS for your div - telling it exactly where to land!

// Absolute Positioning Sorcery 🔮
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}