作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:46:59 阅读 我要评论

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实现。

  推荐阅读

  js 分页全选或反选标识实现代码

注:对多选按钮操作。 1:批量全选添加、批量移除。 2:行单选添加、移除。 3:分页之后(全选或不选)状态标识依然存在 复制代码 代码如下: /* *****>****>tr单选事件 ------------------------------------------->>>详细阅读


本文标题:基于jQuery实现的水平和垂直居中的div窗口

地址:http://www.17bianji.com/kaifa2/JS/24308.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)