如何讓一張圖片在頁面中水平居中或垂直居中是前端開發(fā)中經(jīng)常遇到的問題，本篇文章主要講解如何使用jQuery實現(xiàn)圖片的水平居中。

// 獲取圖片寬度
var imgWidth = $('img').width();
// 獲取瀏覽器寬度
var winWidth = $(window).width();
// 計算left值
var leftValue = (winWidth - imgWidth) / 2;
// 設(shè)置圖片居中
$('img').css('left', leftValue);

代碼解釋：

第1行：使用jQuery選擇器獲取頁面中的圖片寬度。

第3行：使用jQuery選擇器獲取瀏覽器窗口寬度。

第5行：計算圖片的左邊距離瀏覽器窗口左側(cè)的距離，公式為：(瀏覽器窗口寬度 - 圖片寬度) / 2。

第7行：使用jQuery的css方法設(shè)置圖片的左邊距離瀏覽器窗口左側(cè)的距離。

以上代碼實現(xiàn)了圖片的水平居中，如果要實現(xiàn)垂直居中，只需將imgWidth和winWidth替換為圖片高度和瀏覽器窗口高度，再計算top值即可。