div始終在視窗中垂直水平居中程式碼例項

admin發表於2017-04-07

本章節分享一段程式碼例項，它實現了div在視窗中始終垂直水平居中效果。

即便是調節視窗的尺寸也是如此，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>螞蟻部落</title>
<style>
#box{
  width:100px;
  height:100px;
  background-color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $(window).resize(function(){
    $('#box').css({
      position:'absolute',
      left: ($(window).width() - $('#box').outerWidth())/2,
      top: ($(window).height() - $('#box').outerHeight())/2
    });
  });
  $(window).resize();
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

上面的大媽實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(window).resize(function(){})，當調整瀏覽器視窗大小的時候觸發此事件。

（3）.$('#box').css({})，設定元素的樣式值。

（4）.position:'absolute',設定為絕對定位。

（5）.left: ($(window).width() - $('#box').outerWidth())/2，設定元素的left屬性值，為（當前視窗的寬度-元素的寬度）/2，這時候，元素的恰好實現水平居中。

（6）.top: ($(window).height() - $('#box').outerHeight())/2，和上面同樣的道理，實現了垂直居中效果。

（7）.$(window).resize()，呼叫一次resize()方法，實現開啟頁面時候就垂直居中效果。

二.相關閱讀:

（1）.resize事件可以參閱jQuery resize事件一章節。

（2）.css()方法可以參閱jQuery css()一章節。

（3）.outerWidth()方法可以參閱jQuery outerWidth()一章節。

相關文章