Advertisement
  1. Web Design
  2. HTML/CSS
  3. CSS

The Holy Grail of CSS Centering

Scroll to top
Read Time: 2 min

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:

1
<div class="container">
2
  ...
3
</div>
1
.container {
2
  width: 70%;
3
  height: 70%;
4
  margin: 40px auto;
5
  background: red;
6
}

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:

1
<div class="container">
2
  <div class="outer">
3
    <div class="inner">
4
      ...
5
    </div>
6
  </div>
7
</div>
1
.outer {
2
  display: table;
3
  width: 100%;
4
  height: 100%;
5
}
6
.inner {
7
  display: table-cell;
8
  vertical-align: middle;
9
  text-align: center;
10
}

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

1
<div class="container">
2
  <div class="outer">
3
    <div class="inner">
4
      <div class="centered">
5
        ...
6
      </div>
7
    </div>
8
  </div>
9
</div>
1
.centered {
2
  position: relative;
3
  display: inline-block;
4
5
  width: 50%;
6
  padding: 1em;
7
  background: orange;
8
  color: white;
9
}

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

Demo on GitHub

Alterations

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.