让一个div盒子在浏览器视窗中居中的算法

简介: 让一个div盒子在浏览器视窗中居中的算法

算法思路

  • div.left = (视窗宽度-div的offsetWidth)/2

代码

var oDiv = document.getElementById('div1');
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var divW = oDiv.offsetWidth;
var divH = oDiv.offsetHeight;
oDiv.style.left = (clientW - divW)/2 + 'px';
oDiv.style.top = (clientH - divH)/2 + 'px';

效果

image.png

代码地址

点击这里


相关文章
往 p 标签里放了个 div,把浏览器都给整不会了
块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)
87 0
往 p 标签里放了个 div,把浏览器都给整不会了
|
前端开发
【css】设置div位于浏览器的最底层,离用户最远
有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层。离用户最远?    .in{ z-index: -1; } 然后引用in到你想用的div的class上即可!z-index代表图层的优先级,正数越大,离...
1106 0
|
Web App开发 前端开发 测试技术