如何使用 jQuery 將 DIV 元素在網頁上置中？

使用 jQuery 將 DIV 放置在網頁中央

DIV 元素在螢幕上居中是 Web 開發中的常見要求。 jQuery 提供了一個方便的解決方案來實現此目的。

解決方案：

要使用jQuery 將DIV 居中，您可以利用以下函數：

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

該函數透過根據螢幕尺寸和DIV的中心座標計算來修改DIV的位置尺寸。

用法：

將函數加入jQuery 後，您可以使用以下語法在目標DIV 上簡單地呼叫它：

$(element).center();

這將使DIV居中

示範：

要示範此功能，可以參考下面的Fiddle，其中包含一個額外的參數來控制居中精確度：

[ Fiddle Link]

利用此jQuery 函數，您可以輕鬆地將任何DIV元素放置在網頁的中央頁。

以上是如何使用 jQuery 將 DIV 元素在網頁上置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！