center Dialog

HTML

<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="dialog">
  <span>Are you sure you want to delete </span>
  <span class="txtBold">"Awsome Report"</span>
  <span>?</span>
</div>

<div class="huge">

</div>

CSS

.huge {
  height: 5000px;
  background-color: gray;
}
.txtBold {
  font-weight: bold;
}

JavaScript

$(window).on('resize', function () {
	$(".dialogOnResize").css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-100px', 'left': '50%', 'margin-left': '-235px' });
});

$(document).ready(function () {
for (var i=0; i < 3000; i++) {
	$('.huge').append('<div>Number: ' + i + '</div>');
}

	var dialogDiv = $("#dialog");
	dialogDiv.dialog({
    title: "Confirm Delete",
    autoOpen: false,
    width: 470,
    height: 200,
    modal: true,
    draggable: false,
    resizable: false,
    closeOnEscape: false,
    create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-100px', 'left': '50%', 'margin-left': '-235px' }).addClass('dialogOnResize'); },
    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");
            }
        }
    });
    
    dialogDiv.dialog('open');
});