Jquery Dialog 是一個常用的彈窗插件，其彈窗大小和位置是可以自定義的，但在使用時往往需要考慮如何保證彈窗在頁面中始終居中，尤其是在不同分辨率或屏幕尺寸下。本文將介紹幾種實現jquery dialog居中的方法。

方法一：使用CSS

.ui-dialog{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

上述樣式通過設置彈窗的定位屬性、top和left比例等屬性來實現居中效果，其中transform屬性用于修正彈窗偏移問題。需要注意的是，該方法在ie8以下版本不兼容。

方法二：使用jquery

$(function(){
var winWidth = $(window).width();
var winHeight = $(window).height();
$('.ui-dialog').dialog({autoOpen: false});
$('.open-dialog').click(function(){
$('.ui-dialog').dialog('open').css({
'top': winHeight/2 - $('.ui-dialog').height()/2,
'left': winWidth/2 - $('.ui-dialog').width()/2
});
});
});

通過獲取到窗口的寬高和彈窗的寬高，再通過jquery對彈窗進行定位，從而達到居中效果。需要注意的是，在頁面加載時需要對dialog進行初始化配置。

方法三：使用插件

Jquery dialog在居中定位方面也有專門的插件，并且兼容性比較好，如jquery.ui.dialog.center.js。

$(function(){
$('.ui-dialog').dialog({autoOpen: false});
$('.open-dialog').click(function(){
$('.ui-dialog').dialog('open').center();
});
});

上述代碼中的center()方法即為插件提供的方法，調用即可實現居中效果，且兼容性較好。