基于jQuery實現(xiàn)的水平和垂直居中的div窗口
更新時間：2011年08月08日 23:38:23 作者：
在建立網(wǎng)頁布局的時候，我們經(jīng)常會面臨一個問題，就是讓一個div實現(xiàn)水平和垂直居中，雖然好幾種方式實現(xiàn)，但是今天介紹時我最喜歡的方法，通過css和jQuery實現(xiàn)。
1、通過css實現(xiàn)水平居中：
.className{
margin:0 auto;
width:200px;
height:200px;
}
2、通過css實現(xiàn)水平居中和垂直居中
通過css創(chuàng)建一個水平居中和垂直居中的div是一件比較麻煩的事情，您必須事先知道另外一個div的尺寸：
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
3、通過jQuery實現(xiàn)水平居中和垂直居中前面已經(jīng)提到過了，css的方法只適用于有固定尺寸的div，所以到j(luò)Query發(fā)揮作用了：
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
});
});
//初始化函數(shù)
$(window).resize();
這種方法的好處是您無需知道div有多大，缺點是它只能通過JavaScript實現(xiàn)。
復(fù)制代碼 代碼如下:
.className{
margin:0 auto;
width:200px;
height:200px;
}
2、通過css實現(xiàn)水平居中和垂直居中
通過css創(chuàng)建一個水平居中和垂直居中的div是一件比較麻煩的事情，您必須事先知道另外一個div的尺寸：
復(fù)制代碼 代碼如下:
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
3、通過jQuery實現(xiàn)水平居中和垂直居中前面已經(jīng)提到過了，css的方法只適用于有固定尺寸的div，所以到j(luò)Query發(fā)揮作用了：
復(fù)制代碼 代碼如下:
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
});
});
//初始化函數(shù)
$(window).resize();
這種方法的好處是您無需知道div有多大，缺點是它只能通過JavaScript實現(xiàn)。
相關(guān)文章
jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會遇到倒計時的功能，例如某些商品在一定期限內(nèi)搞活動，下面小編給大家分享一段代碼關(guān)于jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼，希望對大家有所幫助2016-02-02
Jquery AJAX POST與GET之間的區(qū)別詳細介紹
這篇文章主要介紹了Jquery AJAX POST與GET之間的區(qū)別詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
jQuery實現(xiàn)鼠標(biāo)移到元素上動態(tài)提示消息框效果
當(dāng)光標(biāo)移動到某些元素上時，會彈出像tips的提示框，這種效果想必大家都有見到過吧，下面有個不錯的示例，大家可以感受下2013-10-10
基于JQuery框架的AJAX實例代碼，需要的朋友可以參考下。2009-11-11
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學(xué)習(xí)ztree有所幫助2013-02-02
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)可以擴展的日歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery實現(xiàn)的網(wǎng)站banner圖片無縫輪播效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)站banner圖片無縫輪播效果,結(jié)合完整實例形式分析了jQuery結(jié)合時間函數(shù)實現(xiàn)圖片定時輪播切換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
作為jquery異步請求的傳輸對象，jquery請求后返回的結(jié)果是json對象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式2014-03-03
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法，學(xué)習(xí)jquery的朋友可以參考下2012-02-02
checkbox:click事件觸發(fā)span元素內(nèi)容改變的方法
下面小編就為大家?guī)硪黄猚heckbox:click事件觸發(fā)span元素內(nèi)容改變的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09