jquery ui dialog not showing in center of window after setting position to center

jquery ui dialog not showing in center of window after setting position to
center

I'm new to jquery ui dialog box. I used dialog box in my MVC website.
I placed my dialog container in layout page inside body tag as follows-
<div id="dialogBox"></div>
And then on my view page, I have button with id aMyProfile and written
jquery code for opening my dialog box.
html code for aMyProfile -
<input type="button" id="aMyProfile"
data-url="@Url.Action("UserProfileContainer","User")" value="View
Profile"/>
Jquery code for aMyProfile-
$('#aMyProfile').click(function () {
var currentURL = $(this).attr('data-url');
$('#dialogBox').load(currentURL, function () {
$('#dialogBox').dialog("open");
});
});
and dialog box initaialization as-
$('#dialogBox').dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
position: 'center',
resizable: false,
title: 'Profile',
width: 750
});
all above jquery code is inside $(document).ready(function () {});
when i execute my project it is giving me output as -
My dialog box is not coming at center of window. Even though i set
position to center.
I don't understand that where I'm going wrong.