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 App 内存泄露之调试工具(1)

    Android App 内存泄露之工具(1) 使用内存监測工具 DDMS –> Heap 操作步骤 启动eclipse后,切换到DDMS透视图,并确认Devices视图.Heap视图都是打开的, ...

  2. Azure Nosql

    patterns & practices https://msdn.microsoft.com/en-us/library/ff921345.aspx Solution Development ...

  3. yii2 关系...

    link($name) 会使用..get$name...即有hasmany和hasone... // update lazily loaded related objects if (!$relati ...

  4. Log4j常用配置及使用

    Log4j常用配置及使用 2016-12-14 目录 1 添加log4j依赖2 使用代码配置并调用log  2.1 代码配置LogConfiguration.java  2.2 调用  2.3 结果3 ...

  5. Android AlarmManager的一些问题

    我开始的代码是这样写的 alarmManager.set(AlarmManager.RTC_WAKEUP, (5*1000), sender); 我的本意是设定五秒后启动闹钟 但是每次都是我设置完闹钟 ...

  6. ASP.NET MVC4企业级实战目录

    http://www.cnblogs.com/jiekzou/p/5625762.html#!comments ******************************************** ...

  7. SpringMVC之学习(2)值得接收和传递

    springmvc中 @Controller 来标识一个控制器 @RequestMapping来标识请求路径,可以写在类名上,也可以写在方法名上.写在类,表示所有的方法都在此路径下. package ...

  8. sql经典语句收集

    1随机取出10条数据 select top 10 * from MA_LOT order by newid() 2.随机选择记录select newid() 3.列出数据库里所有的表名select n ...

  9. 爬取千万淘宝商品的python脚本

    import time import leveldb from urllib.parse import quote_plus import re import json import itertool ...

  10. 【转】Visual Studio常用快捷键

    Shift+Alt+Enter: 切换全屏编辑   Ctrl+B,T / Ctrl+K,K: 切换书签开关 Ctrl+B,N / Ctrl+K,N: 移动到下一书签 Ctrl+B,P: 移动到上一书签 ...