jQuery實現的div垂直水平居中例項程式碼

螞蟻小編發表於2017-02-26
jQuery

在視窗中有一個div元素，下面就介紹一下如何使用jQuery將其設定為水平垂直居中對齊。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>jQuery實現的div垂直居中例項程式碼-螞蟻部落</title>  
<style type="text/css">  
.className{  
  margin:0 auto;  
  width:200px;  
  height:200px; 
  background-color:#609; 
}  
</style>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript">  
$(window).resize(function(){  
  $('.className').css({  
    position:'absolute',  
    left:($(window).width()-$('.className').outerWidth())/2,  
    top:($(window).height()-$('.className').outerHeight())/2+$(document).scrollTop()  
  }) 
}) 
$(window).resize();  
</script>  
</head>  
<body>  
<div class="className"></div> 
</body>  
</html>

特別說明:以上程式碼在本站編輯器中執行測試不能夠正確顯示效果，建議複製到本機測試。

上面的程式碼實現了將div的垂直居中效果，下面介紹一下是實現過程:

一.實現原理:

1.水平居中是如何實現的:在css檔案中已經可以將div實現水平居中效果，只要新增如下程式碼即可:

[CSS] 純文字檢視 複製程式碼
margin:0 auto;

2.如何實現垂直居中效果:通過jQuery將div的top屬性值設定為以下值就可以實現在視窗中垂直居中:

[JavaScript] 純文字檢視 複製程式碼
top:($(window).height()-$('.className').outerHeight())/2

以上程式碼可以實現div在視窗中垂直居中效果，但是這麼寫還是有個問題，如果在垂直方向上有滾動條，那麼就可能失效了，因為有被滾動上去的尺寸需要被計算在內，所以就是為什麼在程式碼中需要加上$(document).scrollTop()。

二.相關閱讀:

1.css()函式可以參閱jQuery css()一章節。

2.width()函式可以參閱jQuery width()一章節。

3.height()函式可以參閱jQuery height()一章節。

4.outerHeight()函式可以參閱jQuery outerHeight()一章節。

5.scrollTop()函式可以參閱jQuery scrollTop()一章節。

6.resize事件可以參閱jQuery resize事件一章節。

相關文章