How to make jQuery dialog popup stay in the center of browser

How to make jQuery popup stay in the center of the screen even while I'm scrolling up/down or change the size of the browser window?

This div is supposed to hold the dialog:

<div id="dialog">
  <h3 id="deleteMessage"></h3>
</div>

and there is the dialog jQuery code:

$("#dialog").dialog({
        title: "Confirm Delete",
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        minWidth: 440,
        minHeight: 220,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();

there is also this code that will show the popup message depending on the id of the datatable element I have selected

$("#deleteMessage").html('Are you sure you want to delete "' +"<b>"+ selectedItemName +"</b>"+ '" report?');

When I add some css like:

#dialog{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
 }

then I get this problem:

the text "are you sure you want to delete..." stays in the center of the screen while the popoup dialog stays where it appears in the beginning and goes up/down with the page content