- 浏览: 62640 次
- 性别:
- 来自: 南京
文章分类
最新评论
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
//Use the above function as:
$(element).center();
另外还有一些其他的实现方法
< !-- html -->
<div id="outer">
<div id="middle">
<div id="inner">
any text <br>
<b>any height </b><br>
any content, for example generated from DB <br>
everything is vertically centered <br>
</div>
</div>
</div>
< !-- CSS -->
html{height: 100%;}
body {height: 100%;}
#outer {height: 600px; overflow: visible;width: 100%;position: relative;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;position:static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
转载自:http://www.9958.pw/post/jquery_center
发表评论
-
项目管理之如何控制项目进度和质量
2016-07-16 22:37 453控制项目进度和质量首先在整体上要有一个合理清晰的流程,并且在整 ... -
15 个非常棒的 CSS3 效果教程
2016-07-03 20:42 4371. 创建一个漂亮的图标 这个教程将教你如何用纯 C ... -
前20名的不安全密码(需要避免)
2016-07-01 21:41 355下图举例说明了一些人们作出选择密码时最常用的错误,以及如何使你 ... -
js实现图片放大缩小后进行的复杂排序
2016-06-30 21:57 433首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小 ... -
史上最全ajax(原生JS,javascript版,非jquery)详细注释!
2016-06-29 22:31 666史上最全ajax详细注释!(原生JS,javascript版, ... -
php千万级pv架构经验分享
2016-06-28 22:04 1073转载自:http://www.9958.pw/post/ph ... -
ecshop 时间问题请注意 /data/config.php
2016-06-27 22:43 707ecshop 处理时间,绕来绕去, 后台的时区设置, 并非以 ... -
目前比较流行的二维码的生成
2016-06-26 23:55 451最近比较流行二维码,自己百度了一下发现有一个很不错的实现方法使 ... -
如何阻止移动设备(手机,pad)浏览器双击放大网页?
2016-06-24 22:29 1055现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置 ... -
PHP解决Xss跨域攻击以及sql注入等危险字符串方案类库
2016-06-19 21:45 633由于该模块在项目中的要求是 不能提示任何信息,也不作断点操作, ... -
网站敏感骂人词库及算法(附6仟个敏感词)
2016-06-16 22:07 5644原文:「我今天开着张三丰田去上班 」 strtr:「我今天开 ... -
纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
2016-06-11 21:32 8041、正方形 CSS代码如下: #square { widt ... -
分享一个JQuery写的点击上下滚动的小例子
2016-06-08 22:00 364效果图 演示地址 源码下载 <!--more--> ... -
精美的国外扁平化网页设计作品
2016-06-05 16:02 446Who Wanna <!--more--> ... -
提交您的博客到各大网站
2016-06-03 21:04 334各大搜索引擎网站登录入口: Google收录入口:http:/ ... -
推荐7个 CSS3 制作的创意下拉菜单效果
2016-06-02 22:15 3521. 使用 jQuery 和 CSS3 制作向下滑动的导航菜单 ... -
Dev Http Client(Chrome的HTTP插件)
2016-05-31 22:34 705Dev Http Client(Chrome的HTTP插件) ... -
好的用户界面-界面设计的一些技巧
2016-05-29 16:24 3521 尽量使用单列而不是 ... -
项目组制定的一份页面优化指南
2016-05-27 21:40 3281.文档声明 文档声明必须置于网页的HTML部分的最开始,标签 ... -
mysql数据库sql优化原则
2016-05-26 21:20 286这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途 ...
相关推荐
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
DIV水平垂直居中,都是利用jquery实现的,很简单
明锋工作室整理常用资料。本次资料是一个自动居中插件,只要设定div长度和高度,其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。
jQuery弹出层垂直居中效果.zip
jquery图片等比例缩放图片左右垂直居中 jquery图片等比例缩放图片左右垂直居中
我们见过很多jQuery实现的弹出窗口效果,当然,... 今天给大家推荐一个,无论你弹出窗口分辨率多少,均会实现垂直居中效果 使用方法: 1、附件中只提供了一个index.html文件,所以看起来并不复杂,稍加辨识即可
jQuery动画垂直折叠导航效果
jquery图片尺寸调整插件图片垂直居中自适应容器
jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。
jQuery实现垂直滚动菜单效果是一款鼠标上下移动菜单垂直滚动切换特效。
jquery鼠标悬停图片水平垂直翻转图片效果代码
jquery水平或垂直的列表
jquery实现图片垂直水平翻转效果
1、通过css实现水平居中: 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过css... } 3、通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明: 外侧...
jQuery制作垂直箭头菜单
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
jQuery的:CenterIt 一个非常简单的jQuery插件,可在父元素内垂直和水平居中放置选定的元素。