让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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Node.JS如何实现JWT原理
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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python中图像通道分离与合并实例
2020/01/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
python 常见的反爬虫策略
2020/09/27 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
师范毕业生个人求职信
2013/12/09 职场文书
先进事迹报告会感言
2014/01/24 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript