Resource: The Complete Guide to Centering in CSS

Posted on: May 17, 2020 Written by Stephanie Eckles

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:

What to Read Next

Browse the whole series

Equal Height Elements: Flexbox vs. Grid
Review solutions using both Flexbox and CSS grid and learn when you might choose one over the other.
Expanded Use of `box-shadow` and `border-radius`
This episode will explore expanded usage of `box-shadow` and `border-radius` and conclude with a landing page demo using these properties to enhance the image presentation.
CSS Tips in Your Inbox
Join my newsletter for article updates, CSS tips, and front-end resources!
Newsletter Signup
Solutions to Replace the 12-Column Grid
Create simplified responsive grid systems using both CSS grid and flexbox. Using both, we'll create just two classes to handle from 1-4 columns of content that responsively resizes.