Bullseye! 4 ways to center that damn div with CSS

Photo by Immo Wegmann on Unsplash

If there is a thing that used to be unintuitive in CSS (or even ridiculously hard for beginners) is aligning stuff to both horizontal and vertical center. This visual little detail so easy to design usually meant a good amount of frustration for old-timey web developers.

Thankfully Flexbox came around and changed that but, despite it being my go to way of centering stuff, I believe that we have a lot to learn from alternative ways of doing so. So we are going to cover that and some other ways to solve this common UI problem.

Oh, and we're not talking CSS Grid here because that is a complex, very well resourced property with endless alignment possibilities that would need a full article to present.

Anyways, here we go:

The good, reliable way

One good thing about Flexbox is that it feels like a very well thought standard. It can get a bit complex, yes, but if you give yourself a chance to actually understand how it works it empowers you to make very elegant and, well, very flexible layouts.

That being said, here's how you center stuff with Flexbox.

No drawbacks, no bells and whistles, just a very good CSS property used the way it was intended to. It is so good that you don't even need to add properties to the child element, but if you really wanted to you could do something like .child { align-self: center; } instead of .parent { align-items: center; }.

The classic align

If there is anything classic on web development is the good old <table> element.

Other than it's main use of creating tables, <table> used to be repurposed on sliced websites made with Photoshop and it still shines in email templates. However, back in the day, making use of its layout properties was a sure, albeit a bit hacky, way to align elements to the center of a parent.

Here's how you'd do it back in the day -- and how you probably still wanna do it in email templates because, let's be honest, Gmail won't fully support Flexbox anytime soon...

Not too shabby, right? It still is easy to read and understand but there is some bitterness in repurposing display: table and display:table-cell for only that but, whatever works, man.

The X/Y align

This one makes use of some absolute positioning magic and transform properties. It is not as pure as the Flexbox approach, but it is useful for cases where you want child elements to overlap each other naturally.

Let's take a look at the example:

The main difference of this technique is that, considering that the children are absolute, any new child that you add will fill the exact same space inside the parent. And by changing the transform values or playing around with opacity that might be super useful.

The line-height hack-align way

This one feels the hackyest so far, but it works well if the parent height doesn't vary and the child is an inline element like a <span>, <a> or a text node... You know what, you're probably better off with any of the other solutions, but here is how it works anyway:

I mean, it is suboptimal that you'd need to also change the line-height of the child if the parent height changed, but this is better than increasing the child's vertical padding pixel by pixel...

Conclusion

A bit of well-used CSS can go a long way.

These four different solutions for a single problem can address multiple use cases and hopefully help you on your quest for an incredible UI implementation.

---

Hey, let's connect 👋

Follow me on Twitter and let me know you liked this article!

And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄

Comments

[Andrew]

I think there is a quite simple CSS Grid method

.parent {
  display: grid;
}
.child {
  margin: auto;
}

But I can see why you didn't include it. CSS Tricks also has a nice post about this:
css-tricks.com/centering-css-compl...

[JWP]

I now use grid for everything except margins and padding

[Victor Peres]

Great article! As someone with little background in CSS, I have a couple of questions: what is the main reason that flexbox is your go-to centering way instead of using the table-like alignment? Also, with the X/Y way, wouldn't it break the responsive layout?

[Vitor Paladini]

Thanks for the feedback, I appreciate it!

what is the main reason that flexbox is your go-to centering way instead of using the table-like alignment?

It's hard to reply this question with something other than "because it is the right way" 😅 My main reasoning is that Flexbox itself was developed from the ground up as way to standardise positioning of elements that were previously implemented with floats and properties like top, left, etc.

MDN's article on Flexbox is great resource on the What/Why/How of it developer.mozilla.org/en-US/docs/L....

Also, with the X/Y way, wouldn't it break the responsive layout?

Not really because in the example we are using percentage for left/top/transform so if the width of the parent component increases/decreases the child stay in the right place. You can try changing some of the property values in the X/Y codepen and see how the example adapts.

[Dell Ward]

Beware half-pixels in using X/Y align method. Chrome still renders half-pixels (causing blurry content) with percentage-based CSS translations. It drives me insane that Chrome still doesn't see this as an issue.

[Abdisalan]

don't forget about margin: calc(50% - 100px) 😂

[Vitor Paladini]

Hey Vesa, great addition, thanks!

I really love that nowadays we don't have as much cross-browser problems that we had back in the IE6 era. I don't remember ever using the "hasLayout" trick but sure enough I've written a few browser specific stylesheets in the past. I don't miss those times 😄

[Emilie Ma]

Thanks for sharing - definitely will be using X/Y and classic in the future, and will check the other two out!