jquery dialog not centering?

http://stackoverflow.com/questions/3856026/jquery-dialog-not-centering ~ Rubens Mariuzzo (www.mariuzzo.com)

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css">
<div style="width:800px; height:800px; border:solid 1px red;">
    <div id="dialog-modal" title="Basic dialog">hello</div>
    <input type="button" value="test" />
</div>

CSS

#dialog-modal { display:none; }

JavaScript

function showDialog() {
    $("#dialog-modal").dialog({
        resizable: true,
        height: 140,
        modal: true,
        position: 'center',
        buttons: {
            'Yes': function () {
                $(this).dialog("close");
                return true;
            },
            'No': function () {
                $(this).dialog("close");
                return false;
            }
        }
    });
};

$('input').click(function(){
    showDialog();
});