学习内容：

下面就跟大家一起简单分析下JS是如何实现让div盒子，在页面自动居中，并且随着页面的变动，也能居中。

思路：

  一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。二、然后获取自身DIV盒子的宽度、高度。三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。四、随着我们的浏览器窗口的改变，让DIV盒子也能随着页面的改变而居中。（利用onresize事件）

学习代码：

css

<style>*{padding: 0;margin: 0;}#box{width: 300px;height: 300px;background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
</style>

<script><div id="box"></div>window.onload=function(){function box(){var Obox=document.getElementById('box');console.log(Obox);var H1=Obox.offsetHeight;//元素的高var W1=Obox.offsetWidth;//元素的宽//获取实际页面的top值。（页面宽度减去元素自身高度/2）var top=(document.documentElement.clientHeight-H1)/2;//获取实际页面的left值。（页面宽度减去元素自身宽度/2）var left=(document.documentElement.clientWidth-W1)/2;Obox.style.left = left+'px';Obox.style.top = top+'px';}box();//当浏览器页面发生改变时，DIV随着页面的改变居中。window.onresize=function(){box();}}
</script>

通过JavaScript使div随时居中相关推荐

如何在html盒子中将图片居中,css3怎么使div图片居中？
在网页中我们多使用css+div进行布局,我们通常会将图片放在div中,那么该如何让图片在DIV盒子里水平居中.下面我们来看一下css设置图片在div中居中的方法. css3使div图片居中的方法: ...
html如何将div居中置顶层,CSS如何使DIV层居中
如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明 ...
css中如何使div元素居中垂直水平居中
html <div class="box"><div class="box1"></div> </div> 方法 ...
在html中如何使div在页面中居中显示
在html中如何使div在页面中居中显示最近无聊中又再温习了下html,发现好多东西都忘了.尝试着写了一个html网页,结果就连div如何在页面中居中显示都查了好久才弄出来.其实我不知道为什么这样可 ...
利用transform：translate使div居中显示
利用transform:translate使div居中显示之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的. ...
用CSS使DIV水平居中
一,用CSS使DIV层水平居中对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看 ...
html中div内容居中的方法
一.div内容居中的方法: 方法1:table-cell div中的内容居中:不改变盒子尺寸. <!DOCTYPE html> <html lang="en"& ...
用CSS让DIV上下左右居中的方法
例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念利用表格单元格的居中属性. 步骤 ...
div内容居中、隐藏及按钮隐藏写法
一.使div中内容居中的方法 style='text-align:center;padding:20px;' <div style='text-align:center;padding:20px ...

通过JavaScript使div随时居中

学习内容：

学习代码：

通过JavaScript使div随时居中相关推荐

最新文章

热门文章