Jquery是一個(gè)流行的JavaScript框架，它可以幫助我們輕松實(shí)現(xiàn)各種前端交互效果，例如頁面元素的居中。在本文中，我們將介紹如何使用Jquery來居中一個(gè)div元素。

我要居中

首先，我們需要給待居中的div元素一個(gè)確定的寬度和高度，并設(shè)置它的position屬性為absolute，以便我們可以將其移動(dòng)到正確的位置。然后，我們需要使用Jquery來計(jì)算div元素相對(duì)于父元素的偏移量，從而可以將其移動(dòng)到屏幕中央。

$(document).ready(function(){
var centerDiv = function(){
var divWidth = $(".center").width(); //獲取div元素的寬度
var divHeight = $(".center").height(); //獲取div元素的高度
var winWidth = $(window).width(); //獲取瀏覽器窗口的寬度
var winHeight = $(window).height(); //獲取瀏覽器窗口的高度
var leftPos = (winWidth / 2) - (divWidth / 2); //計(jì)算div元素的水平偏移量
var topPos = (winHeight / 2) - (divHeight / 2); //計(jì)算div元素的垂直偏移量
$(".center").css({"position":"absolute", "left":leftPos, "top":topPos}); //將div元素移動(dòng)到中央
};
$(window).resize(centerDiv); //當(dāng)窗口大小變化時(shí)重新定位div元素
centerDiv(); //初始化時(shí)定位div元素
});

上述代碼中，我們首先定義了一個(gè)centerDiv函數(shù)，該函數(shù)根據(jù)瀏覽器窗口的大小和div元素的大小來計(jì)算div元素的偏移量，然后使用css方法將其移動(dòng)到正確的位置。在document.ready事件中，我們將該函數(shù)綁定到了窗口的resize事件，以便我們可以在窗口大小發(fā)生變化時(shí)重新定位div元素。最后，我們調(diào)用centerDiv函數(shù)來初始化div元素的位置。