利用jq让你的div居中的好方法分享


Posted in Javascript onNovember 21, 2013

very short version:

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

short version:

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

Activated by this code :
$('#mainDiv').center();
 

PLUGIN VERSION

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Activated by this code :

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);
Javascript 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JavaScript 基本概念
Jan 20 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
详解如何在angular2中获取节点
Nov 23 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 #Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 #Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
You might like
paypal即时到账php实现代码
2010/11/28 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php银联网页支付实现方法
2015/03/04 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python之字典对象的几种创建方法
2020/09/30 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
建筑自我鉴定
2013/10/19 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
小区消防演习方案
2014/02/21 职场文书
采购求职信
2014/03/17 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
高一英语教学反思
2016/03/03 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Redis三种集群模式详解
2021/10/05 Redis