jQuery是一種流行的JavaScript庫，可幫助開發人員輕松完成各種任務。其中一項任務是在網頁中定位和居中元素，例如div元素。在本文中，我們將學習如何使用jQuery使div元素垂直居中。

// HTML
<div class="container">
<div class="centered">
<p>這是一個居中的div元素</p>
</div>
</div>
// CSS
.container {
height: 300px;
text-align: center;
}
.centered {
display: inline-block;
vertical-align: middle;
}
// jQuery
$(window).on('load resize', function() {
var containerHeight = $('.container').height();
var centeredHeight = $('.centered').height();
var marginTop = (containerHeight - centeredHeight) / 2;
$('.centered').css('margin-top', marginTop);
});

首先，我們在HTML中創建了一個名為“container”的div元素，并在其中創建了一個名為“centered”的子div元素，以及一個p元素，用于在頁面上顯示文本。我們也為container元素設置了一個高度。

現在讓我們轉到CSS代碼。容器元素已設置為居中對齊，而子元素則顯示為inline-block和vertical-align屬性。這將使子元素垂直居中，因為它具有與容器相同的line-height屬性。這是div垂直居中的基本方法。

最后，我們使用jQuery來動態地計算“centered”div元素的margin-top屬性，以便使其在居中位置上。我們使用了一個window事件，使垂直居中響應瀏覽器大小的變化。

總之，使用jQuery可以輕松地使div元素在頁面上垂直居中。我們只需要幾行代碼，即可完成這項任務，并且它可以響應瀏覽器大小的變化。