在網頁開發中，設置圖片居中是一個非常常見的需求。通常，我們可以使用CSS來實現這個目標。而使用jQuery，可以更加簡單和靈活地實現圖片居中的效果。

// HTML代碼
<div id="img-wrapper">
<img src="./img/test.png">
</div>
// CSS代碼
#img-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
#img-wrapper img {
max-width: 100%;
max-height: 100%;
}
// jQuery代碼
$(document).ready(function() {
// 獲取圖片
var img = $('#img-wrapper img');
// 等待圖片加載完成后執行
img.on('load', function() {
// 計算圖片寬度和高度
var width = img.width(),
height = img.height();
// 計算圖片外層容器寬度和高度
var containerWidth = $('#img-wrapper').width(),
containerHeight = $('#img-wrapper').height();
// 計算圖片需要偏移的距離
var left = (containerWidth - width) / 2,
top = (containerHeight - height) / 2;
// 設置圖片的位置
img.css({
'position': 'relative',
'left': left + 'px',
'top': top + 'px'
});
});
});

以上代碼中，我們首先使用了CSS的flex布局實現了圖片居中的效果。而在jQuery中，我們在文檔加載完成后，等待圖片加載完成，然后計算出圖片需要偏移的距離，在設置圖片的位置。這樣就可以快速實現圖片居中顯示的效果。