码迷,mamicode.com
首页 > Web开发 > 详细

原生 js 让div上下左右居中

时间:2018-07-10 12:46:58      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:scroll   cli   window   int   html   var   实现   class   code   

html 里写出一个div, css给div 定宽高和背景色:

<div class="boxes">

</div>

<style type="text/css">

.boxes{
  width: 200px;
  height: 200px;
  background: #CCCCCC;
}

</style>

上面绘出的是一个宽高给为200的背景色为浅灰色的框框。

技术分享图片

现在要让这个div 相对于浏览器居中,通过一段javascript代码实现:

var w = document.body.clientWidth;//浏览器的宽
                var h = window.innerHeight;//浏览器的高
                console.log(w+" "+h);
                var boxes = document.getElementsByClassName("boxes")[0];
                var boxWid = boxes.scrollWidth;//获取div的宽
                var boxHgt = boxes.scrollHeight;//获取div的高
                console.log(boxWid+" " +boxHgt);
                boxes.style.marginLeft = w/2-(boxWid/2)+"px";
                boxes.style.marginTop = h/2 -(boxHgt/2)+"px";

这样灰色矩形框div就可以相对于浏览器绝对居中了。

 

原生 js 让div上下左右居中

标签:scroll   cli   window   int   html   var   实现   class   code   

原文地址:https://www.cnblogs.com/lfvkit/p/9288186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!