让html元素随浏览器的大小自适应垂直居中的实现方法

表格可以实现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元素随浏览器的大小自适应垂直居中的实现方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 如何批量生成MySQL不重复手机号大表实例代码

    前言 在MySQL很多测试场景,需要人工生成一些测试数据来测试.本文提供一个构造MySQL大表存储过程,可以生成包含用户名,手机号码,出生日期等字段.也可以通过滤重来使得手机号码不重复,模拟现实场景. 一.生成脚本 生成说明: 以下使用存储过程批量生成包含用户名,手机号,出生日期等字段大表. 该存储过程使用基于uid作为主键,因此会生成少量重复手机号码,后面有滤重SQL脚本. 如果想一次性生成不重复手机号码,可以考虑修改以下脚本,去掉uid,基于mobile列作为主键 DROP TABLE IF

  • 让html元素随浏览器的大小自适应垂直居中的实现方法

    表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行. 但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网.活动展示网等等的时候. 问题: 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中. 解决方案: 1.浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离. (bodyHeight – divHeight)/2 2.浏览器可视区域如果小于元素的高度,即元素距离浏览器可视区域顶部的距离为零. 3.onresize()当浏览器的尺寸改变的

  • 用JavaScript获取DOM元素位置和尺寸大小的方法

    用JavaScript获取DOM元素位置和尺寸大小的方法

    在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL

  • JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

    本文实例讲述了JS实现获取图片大小和预览的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 兼容主流浏览器的iframe自适应高度js脚本

    兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码 代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod

  • Android字体大小自适应不同分辨率的解决办法

    Android字体大小自适应不同分辨率的解决办法

    Android字体大小自适应不同分辨率的解决办法 今天有人问我,Android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的. 一.原理如下: 假设需要适应320x240,480x320分辨率.在res目录下新建文件夹values-320x240, values-480x320.然后在文件夹 values , values-320x240 和  values-480x320 下新建xml文件dimens.xml,该xml文件内容如下: vaules-

  • Android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)

    Android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)

    先给大家展示效果图: 实现代码也很简单,代码如下所示: private void showLabelAlert() { new AlertDialog.Builder(上下文) .setTitle("选择标签") .setItems(addressLabels, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { if (wh

  • js jquery 获取某一元素到浏览器顶端的距离实现方法

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod

  • PyQt5 实现字体大小自适应分辨率的方法

    最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之后,可以支持High_DPI,应用设置该属性即可:如果不支持,可以为应用设置自适应字体. if __name__ == "__main__": v_compare = QVersionNumber(5,6,0) v_current,_ = QVersionNumber.fromString

  • element-plus/element-ui走马灯配置图片及图片自适应的最简便方法

    目录 目标一:插入图片 目标2:图片自适应 总结 首先展示官网给的模板 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in 6" :key="item"> <h3 text="2xl" justi

  • Vue前端项目自适应布局的简单方法

    Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

随机推荐