Javascript jquery ui:未在垂直中心打开对话框

我有一个jquery ui对话框，定义如下：

$('#processPosition').dialog({
        autoOpen : false,
        open: function ()
        {           
            dialogProps.originalContent = $("#processPosition").html(),
            dialogProps.type = $(this).data('type');

            $('#' + dialogProps.type).appendTo($(this));
            $('#rejectPosition').appendTo($(this));
            $("#processPosition .template").removeClass("template");
        },
        show : "blind",
        modal : true,
        resizable : false,
        scrollbar : false
    });

我是这样打开它的：

$('#processOrderPosition').dialog({width: 800})
                          .dialog('option', 'position', 'center')
                          .dialog("open");

这是模板类的唯一css：

.template
{
    display: none;
}

Html模板

div

s:

<div id="SAP-flst-Dialog" class="template">
    <h4>Header</h4>
    <div class="row">
        <span>Some text</span>
    </div>
</div>

<div id="rejectOrderPosition" class="template">
    <h4>second Header</h4>
    <span>Some more Text</span>
</div>

标题
一些文本
第二个标题
更多的文字

我还尝试在打开后设置position属性，但没有效果。在我的浏览器的开发工具中，我可以看到jquery生成了一个

div

，而这个div对于css

top

属性有一个错误的值。

div

具有以下类：

ui对话框ui小部件ui小部件内容ui角落所有ui前端ui可拖动

是什么导致顶部值错误？

$（'#processPosition'）.dialog（）.dialog（“打开”）

})

看这把小提琴，我在div中添加了边框，以查看它是否居中。
也添加html
$(document).ready(function(){
  $('#processPosition').dialog({
  autoOpen : false,
  open: function ()
  {           
      dialogProps.originalContent = $("#processPosition").html(),
      dialogProps.type = $(this).data('type');
      $('#' + dialogProps.type).appendTo($(this));
      $('#rejectPosition').appendTo($(this));
      $("#processPosition .template").removeClass("template");
  },
  show : "blind",
  modal : true,
  resizable : false,
  scrollbar : false
});