Victoria's Vertical Centering

A common problem for contemporary web designers is vertically centering Web pages. The current model of (X)HTML and CSS sees each Web document as a part of an unbounded area and a browser window as a vista within this document, not as a part of it. Hence it is impossible to vertically center a document in any browser window.

But sometimes, one absolutely has to vertically center a page or pages. There are two ways to do this - through combining client-side scripting (e.g. JavaScript) and CSS absolute positioning, or through old-fashioned HTML construction (one-cell table layout).

Or one can use a little bit of special CSS styling to stretch the document to 100 percent of the browser window's height and then vertically center the rest of page. The QuirksMode method can be used for stretching the document. It really is simple; one must only find an (X)HTML element that is, for a browser, the equivalent of its window - the combination of "body" and "html" is enough for all major browsers - and define absolute-positioned nested div's. (Also, one can adjust the characteristics of this div with "overflow", min/max width/height hacks and so on.)

You can test this method on a specially vertically-centered page with this code:

      <title>Victoria's Vertical Centering - Test Page</title>
      <style type="text/css">
         html, body   { background-color: red; height: 100%; margin: 0; padding: 0;
                        color: white; text-align: center; }
         div#centered { border: 0; background-color: white; height: 50%; width: 50%;
                        position: absolute; left: 25%; top: 25%; color: black; }
      <div id="centered">
         Vertically centered div
            (<a href="" title="Victoria's Vertical Centering">see comments</a>).

Benefits: Table-free vertical centering, script-free vertical centering, vertical-centered fluid layouts for special presentations.

Drawbacks: Percent heights, problems with small windows and special devices.


2003-11-19: Pixy for help with Safari/Mac.

Note: I will appreciate it if you send me your comments, references, or anything else of interest ;-)

(c) 2003 - Vilém Málek (,