Center Page Horizontal & Vertical

Vertical centering has always been awkward with css as vertical-align only refers to inline elements within a single line and not to block level elements. However vertical align does apply to table-cells also so we can use this to our advantage in browsers that support display:table such as mozilla and opera.

We can also cater for all IE (IE5 - IE7) via conditional comments and supply them with their own vertical centering routine.

Here is an example of a vertically and horizontally centred page.

Firstly I'll describe what's needed for mozilla. Here's the main css code:

Code:

* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
background-color: #cccccc;
text-align:center;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:red;
height: 468px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
}

The html would look like this:

Html:

<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1>Centered Vertical and Horizontal</h1>
</div>
</div>
</div>
</body>

Most of the above should be familiar to you but the bit we are interested in is the display:table in #outer. This tells the browser to display this element with the same characteristics of a table which allows us to then use vertical-align:middle. We then nest an inner #container that is set to display:table-cell and this table-cell will then be vertically aligned to the parent as would a table cell.

The inner #inner element is then horizontally centered using margin:auto and that completes the solution for mozilla and Opera. It's a shame that we need the extra wrappers but this is the safest way to do this. Unlike other vertical centering methods (where you position the element 50% from the top and then drag it back up with a negative top margin equal to half the elements height) the method I describe will always stay in the viewport and will not slide off the top or the side of the screen which is a bad failing of other methods used.

To bring IE into the game we need to do something else because it doesn't understand display:table. Luckily we can draw on a behaviour that is consistent from ie5 - ie7 and simply involves positioning the outer element 50% from the top using relative positioning and the dragging the inner element back up with a negative 50% relative top position. In other browsers this would bring the element back to the same position but IE drags the inner element back only half its height therefore perfectly centering the element.

Code:

<!--[if lt IE 8]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->

We also need to add overflow:hidden to the outer for IE7 otherwise we get a vertical scrollbar where its not needed.

<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->

Nothing else needs to be changed as IE7 and under doesn't understand display:table and just ignores it. The html stays the same and the only extra css is the 2 lines above. It couldn't really be much simpler.

Here is the page that would be constructed with the above code and I suggest you refer to the demo for the full code.

Another Method for elements with known widths and Heights

I have another method which is a little simpler to use and I have documented it in an article here so I suggest you take a few seconds to read it as it is really quite simple to use. It uses a float with a negative top margin which creates the centering nicely without content floating through the top of the monitor.

Vertical Centre Elements of Unknown Height and Width

In fact both the above methods are so successful that with a little tweaking you can now actually center elements of unknown width and height unlike any other methods available. Here is the basic example and uses the techniques already explained above so I will leave you just to view source in the demo and see how it all fits together.

^ Back to Top ^