if($("#cont1").css("position")!="fixed"){
        $("#cont1").css("position","absolute");
        var dw = $(window).width();
        var ow = $("#cont1").outerWidth();
        var dh = $(window).height();
        var oh = $("#cont1").outerHeight();
        var l = (dw - ow) / 2;
        var t = (dh - oh) / 2 > 0 ? (dh - oh) / 2 : 10;
        var lDiff = $("#cont1").offset().left - $("#cont1").position().left;
        var tDiff = $("#cont1").offset().top - $("#cont1").position().top;
        l = l + $(window).scrollLeft() - lDiff;
        t = t + $(window).scrollTop() - tDiff;
        $("#cont1").css("left",l + "px");
        $("#cont1").css("top",t + "px");
      }

jquery计算出left和top,让一个div水平垂直居中的简单实例的更多相关文章

  1. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  2. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  3. 如何用css让一个容器水平垂直居中

    方法一: 以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半} ...

  4. 公司的一个面试题:如何用css让一个容器水平垂直居中?

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 七种css方式让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  6. 如何让一个DIV水平,垂直方向都居中于浏览器?

    <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...

  7. 如何让一个div水平和垂直居中对齐

    以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...

  8. DIV在另一个DIV里面垂直居中,水平居中

    HTML: <div class="parent"> <div class="children"> <div class=&quo ...

  9. 关于页面布局中,如何让一个div水平和垂直居中的五个方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【Android】11.1 Activity的生命周期和管理

    分类:C#.Android.VS2015: 创建日期:2016-02-21 一.基本概念 1.必须理解这些方法,否则你编的程序根本就没法在实际项目中使用 当然,如果仅仅是为了玩玩,或者仅仅是作为例子为 ...

  2. ny71 独木舟的旅行

    独木舟上的旅行时间限制:3000 ms  |  内存限制:65535 KB难度:2描述进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客的总重量不能 ...

  3. jQuery实现的手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. python 字符串 大小写转换 以及一系列字符串操作技巧

    总结 capitalize() 首字母大写,其余全部小写 upper() 全转换成大写 lower() 全转换成小写 title() 标题首字大写,如"i love python" ...

  5. 【Java】Collection与Map接口总结

    Collection     -----List                -----LinkedList    非同步                 ----ArrayList      非同 ...

  6. mysql too many max_connections

    debian 环境 mysql  MySQL Community Server 5.6.27 首先修改 my.cnf文件  全局查找  find / -name my.cnf* [mysqld] 配置 ...

  7. strcat

    将两个char类型链接. char d[20]="GoldenGlobal"; char *s="View"; strcat(d,s); 结果放在d中 prin ...

  8. Sqli-LABS通关笔录-5[SQL布尔型盲注]

    /* 请为原作者打个标记.出自:珍惜少年时 */   通过该关卡的学习我掌握到了 1.如何灵活的运用mysql里的MID.ASCII.length.等函数 2.布尔型盲注的认识 3.哦,对了还有.程序 ...

  9. Java NIO使用及原理分析(三)(转)

    在上一篇文章中介绍了缓冲区内部对于状态变化的跟踪机制,而对于NIO中缓冲区来说,还有很多的内容值的学习,如缓冲区的分片与数据共享,只读缓冲区等.在本文中我们来看一下缓冲区一些更细节的内容. 缓冲区的分 ...

  10. 使用RAID与LVM磁盘阵列技术。

    7.2 LVM逻辑卷管理器 前面学习的硬盘设备管理技术虽然能够有效地提高硬盘设备的读写速度以及数据的安全性,但是在硬盘分好区或者部署为RAID磁盘阵列之后,再想修改硬盘分区大小就不容易了.换句话说,当 ...