• 技术文章 >web前端 >js教程

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

    2016-05-16 18:03:47原创421
    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实现。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:水平 垂直居中
    上一篇:js文字链接的热点提示效果代码_文字特效 下一篇:一个鼠标移动滑出层效果的实现代码_javascript技巧
    PHP编程就业班

    相关文章推荐

    • 带你了解React中的Ref,值得了解的知识点分享• 一起聊聊JavaScript函数式编程• 什么是libuv,浅析libuv中的事件轮询(Node核心依赖)• 一文带你深入了解React Hooks!• 了解Node.js Nest.js的AOP 架构,聊聊其好处

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网