Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. CSS

The Holy Grail of CSS Centering

Read Time:2 minsLanguages:

Chris Coyier recently published a decision tree on his site, CSS Tricks, to demonstrate a plethora of ways to horizontally or vertically center things using CSS. As standalone solutions they all have their caveats, but combined they're an unstoppable centering tool which works cross-browser in IE8 and up consistently.

This is how you do it.

Note: to cover all bases I've provided the explanation in video and written form. 

Watch the Video

Download video or subscribe to Tuts+ Web Design on Youtube

Read the Tutorial

If you're making a responsive website, you'll most likely be sizing your elements with percentages, so let's make an arbitrary .container element:

To make sure our containing element stretches out appropriately, let's set html, body { width: 100%; height: 100%; }.

Turning the Tables

Now, inside that .container, we're going to get vertical centering with the common table pattern. This takes normal block level elements and makes them behave like table cells, giving us vertical centering:

Finally, we are going to add a horizontally centered element:

Inside of that, you can place anything your heart desires, including dynamic height text blocks, or absolutely positioned elements.

Demo on GitHub


To change the horizontal centering of the element, just modify .inner's text-align property. To change the vertical centering, modify .inner's vertical-align property.

In Conclusion

This example may seem like a lot of markup, but the working pieces are just three  divs: .outer.inner, and.centered. And the styling for these is consistent so you can use this in your boilerplate CSS across projects and never worry about it again.

It's one more element larger than most centering techniques and completely bulletproof. My hope is that this becomes the standard approach and we can finally stop worrying about centering in CSS.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.