Center elements with 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 HBOMax.com — we teach all of this with our lesson on flexbox: http://wfl.io/learn-flexbox

Video details

Duration

1:20

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Center elements with flexbox",
  "description": "Imagine this: you add new elements to your site and, by default, they&#39;re all placed in the top left corner. That&#39;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.",
  "url": "https://university.webflow.com/videos/center-elements-with-flexbox",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b9483488e862578c168d91_5f808f7d06843d055c0974ff_WFU-thumbnail-jpg.webp",
  "duration": "1:20",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=6MCA2isYnmY",
  "embedUrl": "https://www.youtube.com/embed/6MCA2isYnmY",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}