Centering a DIV with JS/jQuery

[snarfblat]

I'm trying to write a function to center a div within a parent div, and I'm having a little trouble. Horizontally, it works fine. Vertically, not so much. This is my function:

function centerObject(idName, idParent) {
var parentLeft = $(idParent).position().left;
var parentWidth = $(idParent).width();
var parentWCenter = parentWidth / 2;

var parentTop = $(idParent).position().top;
var parentHeight = $(idParent).height();
var parentHCenter = parentHeight / 2;

var objWidth = $(idName).width();
var objWCenter = parentLeft + parentWCenter - (objWidth / 2);

var objHeight = $(idName).height();
var objHCenter = Math.abs(parentTop + parentHCenter - (objHeight / 2) - 20);

$(idName).css({left:objWCenter,top:objHCenter});

};


The line with the Math.abs call is necessary because without it, the given div ends up halfway off the page up at the top. At least this way it appears somewhere within the browser.

The divs in question are all set to position: absolute, but I've tried setting them to all the other possibilities without luck. Or maybe I missed something. This happens in any browser... IE, FF, Chrome, Safari, etc.

In any case, anybody have any ideas on where I went wrong?

Thanks!

Rob

[skywalker2208]

Can you post the html?

[snarfblat]

The HTML is simple...

<div id="whatever"></div>

At the moment the only thing living inside the div is a span and a heading, e.g. "About Us".

Now, the css for it:

#about {
display: none;
position: absolute;
padding: 10px;
border: 2px solid black;
color: black;
background-color: white;
width: 600px;
height: 350px;
}

Does that help?

Thanks!

Rob