DIV Not Get Centered When HTML Element Is Large

My code that centers html elements fails when the html element is large. For example, I have a list of 443 items, which I break into 3 columns within a div. Therefore there are 148 lines in the div. When I use the code below to center the div, the top part of the div is beyond the top of the window screen.

function centerPopup(){
// Get data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupArea").height();
var popupWidth = $(".popupArea").width();
//centering
$(".popupArea").css({ "position": "absolute", "top": Math.floor(windowHeight/2)-Math.floor(popupHeight/2), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
//only need force for IE6
$(".popupBackground").css({ "height": windowHeight });
}