在網頁布局中,居中是一個常見且關鍵的問題。而使用jQuery設置div頁面居中就是一種較為簡單易實現的方式。下面就是一種常見的實現方式:
$(function() { var w = $(window); $('.center').css({ 'position': 'absolute', 'top': (w.height() - $('.center').outerHeight())/2, 'left': (w.width() - $('.center').outerWidth())/2 }); });
上面的代碼中,首先使用了$(function() {...}),這是jQuery中的一種簡單的編寫方式(類似于window.onload的寫法),保證了在頁面加載完成后就執行代碼。
然后就是設置div居中的代碼了。首先使用變量w來獲取瀏覽器窗口的大小,然后通過計算div的高度和寬度,來設置div相對于瀏覽器窗口的位置。其中,top屬性和left屬性就是設置div相對于窗口上下和左右居中的關鍵。
以上就是使用jQuery來設置div頁面居中的方式,如果您還有其他更簡單、更實用的方法,也歡迎分享哦~