转自:http://www.cnblogs.com/linjiqin/archive/2011/06/15/2081362.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)/;
dairyBox.style.marginTop = endHeight + "px";
}else{
dairyBox.style.marginTop = ;
dairyBox.style.top = ;
}
}
 
if(document.all){
window.attachEvent('onload',divMiddle);
}else{
window.addEventListener('load',divMiddle,false);
}
 
var resizeTimer = null;
window.onresize = function(){
resizeTimer = resizeTimer?null:setTimeout(divMiddle,);
}

注意事项:
根据浏览器的不同onresize被触发的次数都不相同,因此处理的时候要格外小心。

让html元素随浏览器的大小自适应垂直居中的更多相关文章

  1. css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

  2. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  3. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  4. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  5. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  6. 一文看懂js中元素的客户区大小(clientWidth,clientHeight)

    元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...

  7. WebView加载HTML图片大小自适应与文章自动换行

    http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...

  8. 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...

  9. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

随机推荐

  1. Android ADB命令大全(通过ADB命令查看wifi密码、MAC地址、设备信息、操作文件、查看文件、日志信息、卸载、启动和安装APK等)

    ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...

  2. GAE初探-一鼻子灰

    考虑到GAE可以一定条件下免费发布app,再加上之前有潜在客户需要用到GAE. 遂决定了解一番. 以比较熟悉的django作为切入点, 1. 首先安装 GAE-launcher,似乎没有太大问题 2. ...

  3. PHP日期格式转时间戳

    PHP 提供了函数可以方便的将各种形式的日期转换为时间戳,该类函数主要是: strtotime():将任何英文文本的日期时间描述解析为时间戳. mktime():从日期取得时间戳. strtotime ...

  4. systemd在各个linux发行版的普及

    后面我要说下自己的意见: 原则如果阻碍了进步,那还算个屁,不客气地说,UNIX 原则已经过时了. 移植性问题:我除了 Mac 外不用任何 BSD 系统,当然 Mac 上一般只做开发不做运维(但就算如此 ...

  5. CSS本页写样式

    <style type="text/css">p{ color:#ff0000; font-size:24px; font-family:"隶书"; ...

  6. php抽象类的简单应用

    抽象类也是面向对象中的重要概念,和接口.继承的概念重要性相当,在面向对象的开发中,所有的对象都是通过类来描述的,但是反过来,并不是所有类都是用来描绘对象的,广义上讲如果一个类中没有足够信息来描述一个具 ...

  7. Java for LeetCode 172 Factorial Trailing Zeroes

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...

  8. Price List

    Price List Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/131072 K (Java/Others)Tota ...

  9. sublime text3083 破解 插件汉化

      sublime text  注册码 1. Sublime Text 2.x 版本 —– BEGIN LICENSE —– Andrew Weber Single User License EA7E ...

  10. sublime快捷键整理

    快捷键 功能 ctrl+shift+n 打开新Sublime ctrl+shift+w 关闭Sublime,关闭所有打开文件 ctrl+shift+t 重新打开最近关闭文件 ctrl+n 新建文件 c ...