This video content is for premium members only. Please log in or upgrade your account to view it.

Micro Lesson #6 — Center HTML elements using flexbox

How to center HTML elements easily using Flexbox
Imagine this: you add new elements to your site and, by default, they're all placed in the top left corner. That's web design for you. Using padding and margin to center multiple elements is a recipe for disaster when it comes to responsive design. And things like text alignment and transforms lead to other inheritance issues. Instead, with the power of flexbox, we're able to have full control of our alignment and justification properties. With the parent element selected (whether it’s a Div block or a Container or a Section), apply the flexbox display property. Suddenly, layout superpowers are unlocked. With the click of two buttons, you can align and justify your elements perfectly within the center of its parent element. That's it. No need to individually position your elements using absolute positioning or making tedious adjustments with padding, margin, and gaffer tape. But flexbox doesn't stop there — with these new superpowers, you're able to achieve any type of two-dimensional layouts, such as card designs, a tags wrapper, even fixing the alignment on — we teach all of this with our lesson on flexbox: ---------- Get started with Webflow: