基于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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
详解Angular2响应式表单
Jun 14 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue中使用input[type="file"]实现文件上传功能
Sep 10 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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
Zend Framework页面缓存实例
2014/06/25 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python实现飞机大战项目
2020/03/11 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
护士自荐信范文
2013/12/15 职场文书
会计求职信
2014/05/29 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
Python turtle编写简单的球类小游戏
2022/03/31 Python