让html元素随浏览器的大小自适应垂直居中的实现方法


Posted in Javascript onOctober 12, 2016

表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行。

但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网、活动展示网等等的时候。

问题:

实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。

解决方案:

1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。
(bodyHeight ? divHeight)/2

2、浏览器可视区域如果小于元素的高度,即元素距离浏览器可视区域顶部的距离为零。

3、onresize()当浏览器的尺寸改变的时候触发事件。使用onresize()每次改变的时候,重新计算一下元素到顶部的距离。

实现代码:

function divMiddle(){
	var dairyBox = document.getElementById('dairyBox');
	var divHeight = dairyBox.offsetHeight;
	var bodyHeight = document.body.offsetHeight;
	if(bodyHeight > divHeight){
		var endHeight = parseInt(bodyHeight - divHeight)/2;
		dairyBox.style.marginTop = endHeight + "px";
	}else{
		dairyBox.style.marginTop = 0;
		dairyBox.style.top = 0;
	}
}
            
if(document.all){
	window.attachEvent('onload',divMiddle);
}else{
	window.addEventListener('load',divMiddle,false);
}
             
var resizeTimer = null;
window.onresize = function(){
	resizeTimer = resizeTimer?null:setTimeout(divMiddle,0);
}

注意事项:

根据浏览器的不同onresize被触发的次数都不相同,因此处理的时候要格外小心。

以上就是小编为大家带来的让html元素随浏览器的大小自适应垂直居中的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Javascript创建类和对象详解
May 31 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
Angularjs手动解析表达式($parse)
Oct 12 #Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 #Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 #Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 #Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
关于php fread()使用技巧
2010/01/22 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
JS轮播图的实现方法2
2020/08/25 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python反转序列的方法实例分析
2018/03/21 Python
详解python中list的使用
2019/03/15 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python中wheel的用法整理
2020/06/15 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
电信专业毕业生推荐信
2013/11/18 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
施工安全协议书
2013/12/11 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
初中班干部工作总结
2015/08/10 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技