让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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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 zip文件解压类代码
2009/12/02 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python实现图书管理系统
2018/03/12 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
房屋出售协议书
2014/04/10 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
国庆横幅标语
2014/10/08 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
村主任当选感言
2015/08/01 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL