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上下左右居中
原文地址：https://www.cnblogs.com/lfvkit/p/9288186.html