How to make jQuery dialog popup stay in the center of browser (specific situation)

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? The scenario is like this: to delete a record of the database that are shown in a datatable. So in a Asp.Net MVC project, each datatable element has its own detail, edit and delete actions.

This div is supposed to hold the dialog:

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

and there is the dialog jQuery code:

var dialogDiv = $("#dialog");
var selectedItemId = null;
var selectedItemName = null;

  dialogDiv.dialog({
    title: "Confirm Delete",
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
        },
        buttons: {
            "Delete": function () {                    
                $("#repFilterId").val(selectedItemId);
                $("#deleteForm").submit();

                clearLastValues();
            },
            "Cancel": function () {
                clearLastValues();
                dialogDiv.dialog("close");
            }
        }
    });

function btnDeleteClick(itemID, itemName) {
        selectedItemId = itemID;
        selectedItemName = itemName;

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

        dialogDiv.dialog("open");

When I add some css like (from an answer that I got):

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

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 (those 2 are separated from each-other!)