在開發網頁時，有時需要對頁面進行阻塞，以防止用戶誤操作等情況。而jquery blockui是一種簡單好用的阻塞插件，可以幫助開發者輕松實現頁面的阻塞。本文將介紹如何實現jquery blockui的居中效果。

如果直接使用jquery blockui插件，我們可以通過以下代碼實現阻塞效果：

$.blockUI({ 
message: '頁面正在加載中...', 
css: { 
width: '20%', 
border: 'none', 
padding: '15px', 
backgroundColor: '#000', 
'-webkit-border-radius': '10px', 
'-moz-border-radius': '10px', 
opacity: .5, 
color: '#fff' 
} 
});

上述代碼中，我們通過選擇器調用$.blockUI函數，并在函數中設置了要阻塞的消息內容和樣式屬性。但是這時候阻塞彈窗會默認在頁面的左上角，而我們想讓它居中，該怎么實現呢？

我們可以通過如下代碼實現：

$.blockUI({ 
message: '頁面正在加載中...',
css: {
top:  ($(window).height() - 50) /2 + 'px', 
left: ($(window).width() - 150) /2 + 'px', 
width: '150px', 
height: '50px',
textAlign: 'center', 
border: 'none', 
backgroundColor: '#000', 
'-webkit-border-radius': '10px', 
'-moz-border-radius': '10px', 
opacity: .5, 
color: '#fff' 
} 
});

上述代碼中，我們通過設置css的top和left屬性來使阻塞彈窗水平和垂直居中。其中top屬性的值設置為瀏覽器窗口高度減去阻塞彈窗的高度再除以二，left屬性的值設置為瀏覽器窗口寬度減去阻塞彈窗的寬度再除以二。

通過以上代碼，我們就可以輕松地實現jquery blockui的居中效果了。