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