基于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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Bootstrap实现翻页效果
Nov 27 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 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使用base64加密解密图片示例分享
2014/01/20 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php链式操作的实现方式分析
2019/08/12 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python tkinter实现屏保程序
2019/07/30 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
学生爱国演讲稿
2014/01/14 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
锦旗标语大全
2014/06/23 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
Redis主从复制操作和配置详情
2022/09/23 Redis