让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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
相对路径转化成绝对路径
2007/04/10 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python正则实现提取电话功能
2018/02/24 Python
django2.0扩展用户字段示例
2019/02/13 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
销售员求职个人的自我评价
2014/02/19 职场文书
主持词开场白
2014/03/17 职场文书
个人年终总结开头
2015/03/06 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
开学第一周总结
2015/07/16 职场文书
周一问候语大全
2015/11/10 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers