基于jQuery实现的水平和垂直居中的div窗口


Posted in Javascript onAugust 08, 2011

1、通过css实现水平居中:

.className{ 
margin:0 auto; 
width:200px; 
height:200px; 
}

2、通过css实现水平居中和垂直居中
通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸:
.className{ 
width:300px; 
height:200px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-100px 0 0 -150px; 
}

3、通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只适用于有固定尺寸的div,所以到jQuery发挥作用了:
$(window).resize(function(){ 
$('.className').css({ 
position:'absolute', 
left: ($(window).width() - $('.className').outerWidth())/2, 
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop() 
}); 
}); 
//初始化函数 
$(window).resize();

这种方法的好处是您无需知道div有多大,缺点是它只能通过JavaScript实现。
Javascript 相关文章推荐
jQuery Validate初步体验(二)
Dec 12 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 #Javascript
基于jQuery的前端数据通用验证库
Aug 08 #Javascript
JS基础之undefined与null的区别分析
Aug 08 #Javascript
jQuery的12招常用技巧分享
Aug 08 #Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 #Javascript
jquery动态加载图片数据练习代码
Aug 04 #Javascript
jquery里的正则表达式说明
Aug 03 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
浅析Python函数式编程
2018/10/06 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Django 返回json数据的实现示例
2020/03/05 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
python字典按照value排序方法
2020/12/28 Python
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
企业消防安全制度
2014/02/02 职场文书
法人任命书范本
2014/06/04 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年德育工作总结
2014/11/20 职场文书
公务员考察材料
2014/12/23 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL