Centering Playground

📝 Method 1: text-align: center

Centers inline and inline-block elements horizontally.
Best for: text, buttons, images, inline elements.

This text is centered!

/* Centers inline and inline-block elements */
.text-align-container {
text-align: center;
}

📦 Method 2: margin: 0 auto

Centers block-level elements horizontally.
Best for: divs, sections, containers. Requires a fixed width.

This box is centered!

/* Centers block elements with fixed width */
.margin-auto-box {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

🎯 Method 3: Flexbox (Perfect Centering)

Centers horizontally AND vertically - the modern, best way.
Best for: any element, responsive layouts.

Perfectly Centered!
↓
Horizontal + Vertical

/* Perfect centering with Flexbox */
.flex-center-container {
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center; /* Vertical */
    height: 200px;
}

⬅️ Method 4: Flexbox (Horizontal Only)

Centers horizontally only - items stay at top.
Best for: navigation menus, button groups, card rows.

Horizontally Centered

/* Horizontal centering only */
.flex-horizontal {
display: flex;
justify-content: center;
}

🔲 Method 5: Grid (place-items: center)

Centers horizontally AND vertically - even simpler than Flexbox.
Best for: centering a single element.

Grid Centering!
↓
Horizontal + Vertical

/* Perfect centering with Grid (simpler syntax) */
.grid-center-container {
    display: grid;
    place-items: center;
    height: 200px;
}

✨ Bonus: Centering Multiple Items

Flexbox easily centers multiple items in a row.

Item 1

Item 2

Item 3

Item 4

/* Multiple centered items */
.flex-multiple {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

🧠 Quick Quiz

Test your understanding. Which method would you use for each scenario?

/* Question 1: Center a button inside a div */
/* Answer: display: flex; justify-content: center; align-items: center; */

/* Question 2: Center text inside a paragraph */
/* Answer: text-align: center; */

/* Question 3: Center a div with a fixed width */
/* Answer: margin: 0 auto; */

/* Question 4: Center everything both ways (modern method) */
/* Answer: display: flex; justify-content: center; align-items: center; */