JavaScript设置自适应居中

一、样式设置:

body{
  position: relative;
}
.box{
  height: 200px;
  width: 200px;
  background: red;
  position: absolute;
}

二、HTML部分:

<div class="box"></div>

三、脚本部分:

<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script>
  //设用自适应居中函数
  auto();
  //当该表浏览器窗口时,调用函数
  $(window).resize(function(){
    auto();
  });
  function auto(){
    var L = ($(document).width() - $(".box").width())/2;
    var H = ($(document).height() - $(".box").height())/2;
    //alert("L:"+L+",H:"+H);
    $(".box").css({
    left: L + "px",
    top: H + "px"
   });
  }
</script>

posted on 2015-08-25 00:14  神游其中  阅读(867)  评论(0编辑  收藏  举报

导航