title: Position jQuery UI dialog in center of viewable screen?
body: <p>I am opening a jQuery UI dialog on a click, I need the dialog to position on the center of the viewable portion of the screen/browser.  </p>
  
  <p>The default position of jQuery dialog positions the dialog on the center of the page:</p>
  
  <pre><code>position: { my: "center", at: "center", of: window } 
  </code></pre>
  
  <p>but the page I have the dialog loading on is very long, with a scroll bar, so the dialog first appears half way down the page when I click on it.</p>
  
  <p>Any ideas on how to center the dialog on the viewable portion of the screen?</p>
  
  <p>Javascript for creating and opening jQuery UI dialog:</p>
  
  <pre><code>$(document).ready(function () {
      $("#dialog").dialog({
          autoOpen: false,
          modal: true,
          resizable: false,
          title: "Item Edit",
          buttons: {
              "Save": function (e) {
                  $('input#&lt;%=btnSave.ClientID %&gt;').click();
                  $(this).dialog("close");
                  location.reload();
              }
          }
      });
  
      $(".item").on("click", function () {
          var itemId = $(this).attr("itemId");
          var url = window.location.protocol + "//" + window.location.host + 
                    "/ItemEdit.aspx?itemId=" + itemId;
          $("#dialog").load(url);
          $("#dialog").dialog("open");
          return false;
      });
  });
  </code></pre>
  
  <p>I am using jQuery 1.11.1 and jQuery UI 1.11.1, the fiddle demo below seems to work correctly, but the jQuery versions are not the same.  The main idea is that when a vertical scroll bar is on the page, the default center positioning on the dialog does not work.</p>
  
  <p>JSFiddle demo - <a href="http://jsfiddle.net/t2zf7xow/6/" rel="nofollow">http://jsfiddle.net/t2zf7xow/6/</a></p>