基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口

更新時(shí)間：2011年08月08日 23:38:23 作者：

在建立網(wǎng)頁(yè)布局的時(shí)候，我們經(jīng)常會(huì)面臨一個(gè)問(wèn)題，就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中，雖然好幾種方式實(shí)現(xiàn)，但是今天介紹時(shí)我最喜歡的方法，通過(guò)css和jQuery實(shí)現(xiàn)。

1、通過(guò)css實(shí)現(xiàn)水平居中：

復(fù)制代碼代碼如下:

 
.className{ 
margin:0 auto; 
width:200px; 
height:200px; 
} 

2、通過(guò)css實(shí)現(xiàn)水平居中和垂直居中
通過(guò)css創(chuàng)建一個(gè)水平居中和垂直居中的div是一件比較麻煩的事情，您必須事先知道另外一個(gè)div的尺寸：

復(fù)制代碼代碼如下:

 
.className{ 
width:300px; 
height:200px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-100px 0 0 -150px; 
} 

3、通過(guò)jQuery實(shí)現(xiàn)水平居中和垂直居中前面已經(jīng)提到過(guò)了，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(); 

這種方法的好處是您無(wú)需知道div有多大，缺點(diǎn)是它只能通過(guò)JavaScript實(shí)現(xiàn)。

您可能感興趣的文章:

相關(guān)文章

jquery表單驗(yàn)證需要做些什么
jquery表單驗(yàn)證需要做些什么，大家知道嗎？其實(shí)很簡(jiǎn)單只要做四件事情就可以順利完成表單驗(yàn)證，想知道哪四件事情嗎，請(qǐng)仔細(xì)閱讀下文。
2015-11-11
jQuery動(dòng)態(tài)修改字體大小的方法【測(cè)試可用】
這篇文章主要介紹了jQuery動(dòng)態(tài)修改字體大小的方法,涉及jQuery針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中，使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.
2011-03-03
jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下
2014-05-05
jQueryPad 實(shí)用的jQuery測(cè)試工具(支持IE,chrome,FF)
這個(gè)jQueryPad也是我無(wú)意中在網(wǎng)上看頁(yè)面的時(shí)候看到的，下載下來(lái)試用了下，感覺(jué)很好，這個(gè)軟件是使用WPF開(kāi)發(fā)的（不過(guò)不開(kāi)源，需要安裝.NET Framework 3.5），整體界面很簡(jiǎn)潔。
2010-05-05
基于jquery的動(dòng)畫(huà)效果代碼
基于jquery的動(dòng)畫(huà)效果代碼，挺有意思的，需要的朋友可以參考下
2012-07-07
jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)
這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼，代碼簡(jiǎn)單易懂,需要的朋友可以參考下
2017-09-09
多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
這篇文章主要為大家提供了多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-02-02
來(lái)自國(guó)外的30個(gè)基于jquery的Web下拉菜單
來(lái)自國(guó)外的30個(gè)基于jquery的Web下拉菜單，需要的朋友可以參考學(xué)習(xí)下
2012-06-06
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁(yè)應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下
2013-08-08