We Are Communication Architects

Building brand awareness through content creation and community engagement.

November 9th, 2010

Vertical Alignment with CSS

I’ve been using CSS and non-table based layouts for about 5 years now and until recently one thing I had never had a consistent solution for was centering objects vertically. Either it didn’t come up often in designs, we purposely went around it or, if forced to, used some hacky solution. I finally decided it was time to have a clean, consistent solution since I had a few projects that could use it.

My goal was to have a valid, non-hacked solution to put into my stylesheet(s). Due to IE’s shortcomings, this meant having an IE-specific stylesheet. I used to pride myself on not needing IE-specific stylesheets but this meant extra markup, extra CSS declarations, extra time and extra headaches. The headaches I can deal with but the extra code means extra page load time and the extra time spent working means extra cost to clients. I still try to only use conditional stylesheets as a last resort or for the sake of keeping my code valid. So let me get down off the soap-box and get to the code.

Modern browsers (Firefox, Safari, Chrome, IE8) support the following CSS values:

div {display: table;} /*For parent div*/
div {display: table-cell;} /*For div around item you want centered*/

This makes it fairly simple to vertically center in these browsers. It’s as easy as the code below. Note that the margins and borders are for display purposes only.

Modern Browser Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Vertical Alignment</title>
  <style type="text/css">
  body {text-align: center; margin: 0; padding: 0;}
  .container {border: 1px solid red; width: 200px; margin: 20px auto 0 auto; height: 200px; display: table;}
  .center {display: table-cell; vertical-align: middle;}
  </style>
</head>
<body>
  <div class="container">
    <div class="center">
      Here's some text<br/>I hope it's centered<br/>Is it centered?
    </div>
  </div>
</body>
</html>

Now that you’ve seen how easy it should be, let’s look at what we need to do to get it working in Internet Explorer 6 and 7. Since IE doesn’t recognize displaying items as tables or table cells we have to use positioning. We also need one extra div element.

Internet Explorer Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical Align</title>
<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
.container {border: 1px solid red; width: 200px; margin: 20px auto 0 auto; height: 200px; position: relative;}
.push-down {position: absolute; top: 50%; left: 0;}
.pull-up {position: relative; top: -50%; left: 0; width: 200px;}
</style>
</head>
<body>
  <div class="container">
    <div class="push-down">
      <div class="pull-up">
        Here's some text<br/>I hope it's centered<br/>Is it centered?
      </div>
    </div>
  </div>
</body>
</html>

So here’s the final code that should work in all browsers. It has the extra div that IE needs, but it only has styles applied to it in the IE specific stylesheet.

Combined Solution

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {text-align: center; margin: 0; padding: 0;}
.container {border: 1px solid red; width: 200px; margin: 20px auto 0 auto; height: 200px; display: table;}
.push-down {display: table-cell; vertical-align: middle;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {position: relative;}
.push-down {position: absolute; top: 50%; left: 0;}
.pull-up {position: relative; top: -50%; left: 0; width: 200px;}
</style>
<![endif]-->

</head>
<body>
  <div class="container">
    <div class="push-down">
      <div class="pull-up">
        Here's some text<br/>I hope it's centered<br/>Is it centered?
      </div>
    </div>
  </div>
</body>
</html>

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Development

Comments are closed.