Javascript 绝对中心*上方*具有不同大小内容的div

我有这个剧本：

当您将鼠标悬停在其中一个框上时，弹出div将位于具有不同大小图像的框上方。如何使这些不同大小的图像居中于div上方

---

加载图像后，需要进行更多的数学运算，以正确放置缩略图：

---

加载图像后，需要进行更多的数学运算，以正确放置缩略图：

---

贝伯、施瓦辛格和巧克力。。。一个非常随机的组合，贝伯，施瓦辛格和巧克力。。。一个非常随机的组合。

$("document").ready(function () {

    $("div.box").hover(function() {

        var positionleft = $(this).position().left + $(this).outerWidth() / 2;
        var positiontop = $(this).position().top;

        var img = $("<img src='"+$(this).text()+"' />");
        $("div.popup div.image").html(img);

        img.load(function() {
            $("div.popup").css({
                display: 'block',
                left: positionleft - (img.outerWidth() / 2),
                top: positiontop - img.outerHeight() - 20,
            });   
        });
    });   

});​