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. 同一个界面内取微信的OPENID和调用微信的分享接口

    步骤如下,1:判断URL是否有CODE参数传入,没有则拼接那个微信跳转连接,然后redirect2:有CODE传入,调用微信接口,根据code获取openid和access_token,注意这一步取到 ...

  2. Linux 监控分析

    一.硬件基础 Cpu   逻辑的处理.计算.判断 现代分时多任务操作系统对 CPU 都是分时间片使用的:比如A进程占用10ms,然后B进程占用30ms,然后空闲60ms, 再又是A进程占10ms,B进 ...

  3. 每日英语:For Michael Dell, Saving His Deal Is Just First Step

    Michael Dell is set to win a bruising, yearlong battle for control of his company. His next task -- ...

  4. gulp-uglify的使用

    gulp教程之gulp-uglify 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.js ...

  5. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  6. oracle判断查询结果是否为空

    create table test1023(id int); --创建测试表 test1023 declare cnt int; begin select count(*) into cnt from ...

  7. 用Python写一个猜数字游戏

    2015.5.25第一天下载Python IDLE,写个猜数字的小游戏来熟悉这门语言: times=6 letters=[100] for i in range(1,times): a = input ...

  8. javascript mediator pattern

    定义 定义一个对象,它封装一组相互作用的对象.中介者促使对象之间保持通讯但是又松耦合,你可以很独立的改变他们的相互作用. 提要 中介者提供一个权威中心,用来控制一组对象之间的相互作用.这种模式在这种情 ...

  9. Linu 修改maven的setting保护文件

    查找目录 find / -name .m2 -d 查看文件: cat settings.xml 修改文件 vi settings.xml 修改后发现保存会出问题,报错W10: Warning: Cha ...

  10. mysql海量数据处理步骤

    本文转自https://segmentfault.com/a/1190000006158186 当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据 ...