I'm trying to align a div on a page of mine to align center vertically - the horizontal is handled by the CSS.

The code I'm using is:

function init() {
	// Declare empty variable for the height.
	var height = 0;
	var width = 0;
	// For Non-IE browsers
	if(typeof(window.innerHeight) == 'number'){
		height = window.innerHeight;
		width = window.innerWidth;
	// IE 6+
	else if(typeof(document.documentElement.clientWidth) == 'number') {
		height = document.documentElement.clientHeight;
		width = document.documentElement.clientWidth;
	// Remove the 100px
	var newHeight = height - 100;
	var content_top = (height - 566) / 2;
	document.getElementById('bg').style.top = content_top + "px";	
In the <body> tag, I set the onload and onresize events to this function. However, it's very jerky. Whenever someone visits a different page, the content hits the top of the page, then jumps to the middle again.

Is there a better way of doing this? I heard that in JQuery it could be done, but I'd like to do it with a language I am comfortable with.

Any tips?