Resource: The Complete Guide to Centering in CSS

Posted on: May 17, 2020 Written by Stephanie Eckles

This is episode #11 in a series examining modern CSS solutions to problems I've been solving over the last 14+ years of being a frontend developer.

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:

Tweet this article

What to Read Next

Browse the whole series

Keep the Footer at the Bottom: Flexbox vs. Grid
Floating footers can occur for many reasons, but modern CSS methods using either flexbox or CSS grid let us plan a future-proof solution for any size layout.
Equal Height Elements: Flexbox vs. Grid
Review solutions using both Flexbox and CSS grid and learn when you might choose one over the other.
CSS Tips in Your Inbox
Join my newsletter for article updates, CSS tips, and front-end resources!
Newsletter Signup
3 Popular Website Heroes Created With CSS Grid Layout
This episode explores creating website heroes - aka 'headers' - by using CSS grid and a unique way to apply grid template areas that you can use to replace older methods that used absolute positioning.