基于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 相关文章推荐
用于table内容排序
Jul 21 Javascript
Add a Formatted Table to a Word Document
Jun 15 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
关于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
咖啡的化学
2021/03/03 咖啡文化
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
vue跨域解决方法
2017/10/15 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python difflib模块示例讲解
2017/09/13 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
捐书寄语赠言
2014/01/18 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
优秀员工获奖感言
2014/03/01 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
岗位聘任协议书
2015/09/21 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Python制作春联的示例代码
2022/01/22 Python