让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 相关文章推荐
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
Javascript复制实例详解
Jan 28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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相对当前文件include其它文件的方法
2015/03/13 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
大学学年自我鉴定
2013/10/28 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
员工工作表现自我评价
2015/03/06 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
详解Go语言中Get/Post请求测试
2022/06/01 Golang