Vertically Centering Webpage

Have you ever needed to center your website vertically in the browser window? Sadly enough, vertical-align won't help.

Here's a demo I wrote in response to a forum question on FreelanceSwitch.

This script will make sure the window is big enough to center your content horizontally, make sure it doesn't cut anything off, and degrade gracefully for users with browsers other than Internet Explorer, Firefox, or Opera. It may work on more browsers than IE, FF, and Opera, but I've only tested it in those three.

Open Demo Window

Using the Script

First, enclose your entire site in the v_middle div.

<div id="v_middle">
// Your html
</div>

Next, include the javascript by putting this at the bottom of your page just inside the body tag of your page.

<script type="text/javascript" language="javascript">
<!--
/*************************************************************
/ DeadCenter
/ Copyright 2008 Aculade, LLC (www.aculade.com)
/ You are granted a non-exclusive, non-transferrable license
/ to use, distribute, perform, publically display, and
/ modify this code. You may use it however you please,
/ for any legal purpose personal and commercial.
/ You may NOT take credit for it as your own.
/ You cannot remove this header which guarantees these
/ rights to everyone else.
*************************************************************/

var v_middle = document.getElementById('v_middle')
var v_middle_height = 0;
var avail_height = 0;
var my_content_height = 500; // This is how big your content is, set it to whatever you need.
var my_content_width = 800; // This is the width you want your box to be.

go_deadCenter();

function go_deadCenter() {
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName.indexOf("Microsoft") >= 0) {
avail_height = document.body.offsetHeight;
avail_width = document.body.offsetWidth;
if (avail_height > my_content_height && avail_width > my_content_width)
center_vmiddle();
}
else if (navigator.appName=="Netscape") {
avail_height = window.innerHeight;
avail_width = window.innerWidth;
if (avail_height > my_content_height && avail_width > my_content_width)
center_vmiddle();
}
}
}
function center_vmiddle() {
v_middle.style.position = "absolute";
v_middle.style.top = "50%";
v_middle.style.left = "50%";
v_middle.style.width = my_content_width;
v_middle.style.height = my_content_height;

half_height = (my_content_height / 2) + 10;
v_middle.style.marginTop = "-"+half_height+"px";
half_width = (my_content_width / 2) + 10;
v_middle.style.marginLeft = "-"+half_width+"px";
}
-->
</script>

Code Explanation

The first lines just initialize the variables. These two lines control how large the centered container will be in pixels. Set them to whatever works for you.

var my_content_height = 500;
var my_content_width = 800;

The next line runs the script as soon as the page is loaded, automatically centering the page both horizontally and vertically by calling go_deadCenter().

go_deadCenter();

The function go_deadCenter() makes sure that the browser knows how large the window is set to, gets the size of the available window, and runs the function center_vmiddle() if the window is big enough to contain the centered page.

The first if() makes sure the user has a generation of browser capable of knowing its size.

if (parseInt(navigator.appVersion)>3)

The inner if()...else if() statements determine which document model to use to find the available height and width.

if (navigator.appName.indexOf("Microsoft") >= 0)

else if (navigator.appName=="Netscape")

Both

avail_height = document.body.offsetHeight;
avail_width = document.body.offsetWidth;

and

avail_height = window.innerHeight;
avail_width = window.innerWidth;

determine the size of the user's window. Lastly, the innermost if()'s call the center_vmiddle() function if the window is large enough that the page won't get pushed off the screen by centering.

The last of the javascript is the function center_vmiddle(), which actually centers the page. It sets the container's positioning to absolute, removing it from the documents normal flow. This can be either a good thing or a bad thing. The good news is it will be centered no matter what as long as you don't enclose it in another container that is explicitly positioned relatively. The bad news is that shrinking the window can chop off parts of the page. But that's why we made sure we had enough room to work with before even calling the function!

v_middle.style.position = "absolute";

The next few lines just tell the page to start half way into and down the window and sets the size to whatever height and width you chose. All done right? Not quite.

v_middle.style.top = "50%";
v_middle.style.left = "50%";
v_middle.style.width = my_content_width;
v_middle.style.height = my_content_height;

The problem with that is that it will start the container half way in and down the window. So the left edge of the container will be in the center of the window, and the top edge of the container will start in the middle of the window.

The last four lines correct this by calculating and setting the offset to account for the width of the container by subtracting half of the width and height by setting negative margins. And that does it!

half_height = (my_content_height / 2) + 10;
v_middle.style.marginTop = "-"+half_height+"px";
half_width = (my_content_width / 2) + 10;
v_middle.style.marginLeft = "-"+half_width+"px";

Well, I hope it helps! Feel free to use and play with the javascript, all I ask is that you leave the copyright intact and link back to this page or my homepage if you use it.