- 热门文章
- 最近发表
- 标签列表
-
- 最新留言
-
本篇文章给大家谈谈盒子里的猫，以及盒子浏览器居中的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
其实想让整个DIV盒子在页面实现自动居中非常简单，只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好，做程序功能的开发也好。只要思路理清楚了，相信做起来会非常的得心应手。
下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。
思路：
一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。
二、然后获取自身DIV盒子的宽度、高度。
三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。
四、随着我们的浏览器窗口的改变，让DIV盒子也能随着页面的改变而居中。（利用onresize事件）
代码截图：
代码如下:
其实想让整个DIV盒子在页面实现自动居中非常简单，只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好，做程序功能的开发也好。只要思路理清楚了，相信做起来会非常的得心应手。
下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。
思路：
一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。
二、然后获取自身DIV盒子的宽度、高度。
三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。
四、随着我们的浏览器窗口的改变，让DIV盒子也能随着页面的改变而居中。（利用onresize事件）
代码截图：
代码如下:
