Vertical Centering in HTML

From Zanecorpwiki

Vertical centering is not directly possible in HTML4/CSS2. However, there are some methods to reliable achieve this effect across all major browsers and which usually works with the rest of the layout.

Generally, you'll need the centered element to be of known height, though you can fudge around this some, and you must be able to designate a height on the containing element. This can make it tricky to combine vertical centering with other techniques like the 960 grid. If these conditions cannot be met, you may have to "resort" to JavaScript (which may be more reliable in some instances).

Both Gecko and Webkit have experimental implementations of the CSS3 "box model" which supports vertical centering directly.

Method 1: Use a floater.

This is my new preferred method. It uses a 'floater' element first establish a mid-way point, and then back off the mid-way by 1/2 the height of the height of the element to be centered. I also like the fact that the centering is handled entirely by the single floater element and the centered element need not participate in the centering operation itself, beyond declaring 'clear:both' or inserting a clear-div between the floater and vertically centered element.

<div id="container">
<div id="floater"></div>
<!-- alternative to setting clear on #vCenteredWidget:
  <div class="clear"></div>
     or 
  <div style="clear:both"></div> -->
<div id="vCenteredWidget">
</div>
  ...
</div>

#container {
  position: relative;
  height: 100%;
}

#floater {
  float:left;
  height:50%;
  margin-bottom:-100px;
}
#vCenteredWidget {
  clear:both;
  height:200px;
  position:relative; /*not strictly necessary, but often useful for internal floats and positioned elements */
}

• The presence of a container with explicit height declaration is essential. "100%" is usually what you want. For top-level elements, the "100%" would refer to the entire viewable area. As-far-as-I know, the technique will work for non-page/sub-elements as well.
• The empty floater should be invisible unless the element gets selected for additional formating.
• In the original post where I found this technique (it's 'Method 3'), the author sets up the HTML like:
• A word of warning: I have seen a couple instances where the method fails to center and ends up pushing the centered element down to more or less align the bottom of the element with the top of the footer. This is intermittent on FF 3.5. I've seen in twice in something like 100 views. Once while using firebug, once while just bringing up a page. I am not sure if this represents a certain fragility in the approach, or a particular weakness of FF/gecko.

<div id="floater">
  <div id="vCenteredWidget">
    ...
  </div>
</div>

With the centered element inside the floater. Conceptually this seems odd to me... how do you clear an element you're inside of? I've successfully used my method on a couple of sites now and it seems to work, but if you run into problems, you might try this alternate arrangement.

It may not always be desirable to set the height via CSS. For instance, if the height might under edge cases change subtlety, it's probably less bad to let the element grow a little bit and get slightly off center than to hold to the centering while clipping content.

Method 2: Coordinate between the container and the centered element.

This is my old standby. It's reliable, and I have more experience with it, but it's also more limited than the first method.

In this method, we have a containing element which fully fills the space to be centered in. The 'padding-top' is set to 50%, and then the centered element's 'margin-top' is set to 1/2 the known height of the centered element. Something like:

<div id="container">
  <div id="vCenteredWidget">
    ...
  </div>
</div>

#container {
  position: relative;
  padding-top: 50%;
}

#vCenteredWidget {
  height: 200px;
  margin-top: -100px;
}

Again, it isn't necessary nor in many cases desirable to set the height in the CSS. We do so for demonstration purposes.