loading...
Cover image for Resource: The Complete Guide to Centering in CSS

Resource: The Complete Guide to Centering in CSS

5t3ph profile image Stephanie Eckles ・2 min read

Modern CSS Solutions to Old CSS Problems (17 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 15 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout

This is the eleventh post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

How could I write a series called "Modern CSS Solutions to old CSS problems" without covering the classic question:

"How do I center a div?"

Well, this new resource has you covered! We'll look at 3 categories:

  • Vertically and Horizontally (XY)
  • Vertical (Y)
  • Horizontal (X)

Each category shows solutions that explore using grid, flexbox, and block element layout.

Check out the full guide or jump to one of the following sections:

  1. Vertically and Horizontally (XY)
  2. Vertical Centering (Y)
  3. Horizontal Centering (X)

Modern CSS Solutions to Old CSS Problems (17 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 15 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout

Posted on Jul 5 by:

5t3ph profile

Stephanie Eckles

@5t3ph

Girl Geek, Web Dev (frontend/JS/React) building a design system, teaching a code video series, authoring ModernCSS.dev, egghead instructor, mom to 2 girls

Discussion

markdown guide