JoshWComeau

How to center a div in CSS

From
Josh W. Comeau
Reply-To
support@joshwcomeau.com
Sent
February 13, 2024

This issue of my newsletter was sent to newsletter subscribers.
Sign up to receive future issues!

Hi friend!

I just published a brand-new blog post called How to Center a Div: The Ultimate Guide to Centering in CSS. 🎉

A couple of decades ago, centering an element both horizontally and vertically was one of the more challenging things in CSS. It spawned a ton of memes like this one:

The wonderful people who work on the CSS specification listened, and they gave us so many tools we can use to center stuff. In a way, it's created a new problem: how do we know which method to use, in any given situation? What are the trade-offs between different methods?

In this new blog post, we explore all of the different ways to center stuff in CSS, in all sorts of different situations.

Honestly, this blog post started as a bit of a joke 😅. I thought it'd be a funny title, and it could serve as a useful introduction for folks who are newer to CSS.

It became so much more than that, though.

Even if you've been writing CSS for years, I can almost guarantee you’ll learn something new. We dig into the differences between Flexbox and Grid and uncover a not-well-known footgun, we see how to stack elements without taking them out of flow, and we even explore a brand-new centering method that is only available in pre-release browsers. ✨

Check it out:

💝 One more thing: I'm trying something new with my courses this year, for Valentine’s Day. Everyone who has registered either CSS for JavaScript Developers(opens in new tab) or The Joy of React(opens in new tab) has been given a one-time-use coupon code that reduces the price of the course by 50%!

If you have a friend or co-worker who has taken one of my courses, maybe they can share their coupon with you. 😄

Some quick facts:

  • The coupons are only valid for a few days! They expire on Monday.
  • Coupons can be combined with regional licenses, for folks living in countries with significantly lower purchasing power.
  • Coupons can only be used by people who don't already have an account on my course platform.

I created a special page that includes all the details on this event. If you're a fan of whimsical design and animation, you may want to check it out even if you don't know anyone taking one of my courses:

That's all I've got to say for now! Hope you’re having a swell day ❤️
—Josh

This issue of my newsletter was sent to newsletter subscribers.
Sign up to receive future issues!