让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 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JQuery教学之性能优化
May 14 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
js实现双人五子棋小游戏
May 28 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
图片之间的切换
2006/06/26 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python中的闭包实例详解
2014/08/29 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
煤矿安全承诺书
2014/05/22 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Go获取两个时区的时间差
2022/04/20 Golang