Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Flexbox Alignment & Centering
Centering elements was the hardest problem in CSS before Flexbox. Now it takes just 3 lines. Learn every centering technique - horizontal, vertical, and both - plus advanced alignment patterns with auto margins.
Centering Techniques
- Center both axes - display: flex; justify-content: center; align-items: center; - The classic 3-line solve
- Center horizontally - justify-content: center (in row) or align-items: center (in column)
- Center vertically - align-items: center (in row) or justify-content: center (in column)
- Center with min-height - Add min-height: 100vh to center vertically in the full viewport
- Auto margins - margin-left: auto pushes an item to the right. margin: auto centers a single flex item
- place-content: center - Shorthand for justify-content + align-content. One line centering!
- margin-left: auto trick - On the last nav item, pushes it to the far right. Splits navigation groups
Centering Code
/* 1. Center anything in the viewport */
.full-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* 2. Center text in a button */
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px; /* Space between icon and text */
}
/* 3. Push last item to far right */
.navbar {
display: flex;
align-items: center;
gap: 16px;
}
.navbar .login-btn {
margin-left: auto; /* Pushes to the right */
}
/* 4. Center a single child */
.parent {
display: flex;
}
.centered-child {
margin: auto; /* Centers in both axes */
}
/* 5. Sticky footer layout */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page main { flex: 1; } /* Pushes footer to bottom */Tip
The margin-left: auto trick is the most elegant way to push a single item to the far right in a navbar. It absorbs all available space on the left, no matter how many items are to its left. Perfect for isolating a 'Login' button from the main nav links.
Flexbox is ideal for one-dimensional layouts (row or column)
Common Mistake
Using width: 50% or position: absolute to center elements instead of Flexbox. With Flexbox, centering takes exactly 3 properties on the parent: display: flex; justify-content: center; align-items: center. This also works for vertically centering - something absolute positioning can't do cleanly.
Practice Task
Create a full-page hero section that perfectly centers a title and subtitle both horizontally and vertically: (1) display: flex on the section, (2) justify-content: center + align-items: center, (3) min-height: 100vh. Then add a navbar where the login button is pushed to the right using margin-left: auto.
Quick Quiz
Key Takeaways
- Centering elements was the hardest problem in CSS before Flexbox.
- Center both axes - display: flex; justify-content: center; align-items: center; - The classic 3-line solve
- Center horizontally - justify-content: center (in row) or align-items: center (in column)
- Center vertically - align-items: center (in row) or justify-content: center (in column)