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. Python 訪问Google+ (http)

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-28 @author: guaguastd @name: l ...

  2. bazel-编译动态库

    demo2_2 使用baze编译动态库 demo2_2目录树 ├── app │ ├── BUILD │ ├── func.cpp │ └── func.hpp ├── README.md └── W ...

  3. js 取父级 页面上的元素

    var bb=window.opener.frames["contentIframe"].document.all["my:费用类别"][0].value; / ...

  4. ubuntu 14.04英文环境设置成中文

    适用于ubuntu 14.04英文版的系统,其它版本的设置应该是大同小异的. 进入ubuntu系统,在顶部齿状标志找到system... 2.在personal找到Language Support 3 ...

  5. Ubuntu 12.04安装和设置SSH服务

    OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件.而实现此功能的传统方式,如telnet(终端仿真协议). rc ...

  6. HTML的级联Select

    系统开发中,经常遇到级联Select的状况,而级联的Select Option数据一般记录于DB,如果每次都重新写一套级联Select,工作将是繁琐滴... 一般来说,写一套级联的Select的几个步 ...

  7. LeetCode: ZigZag Conversion 解题报告

    ZigZag ConversionThe string "PAYPALISHIRING" is written in a zigzag pattern on a given num ...

  8. js photoswipe 相册使用 移动pc端均可

    http://photoswipe.com/ 官网  这里使用的是最新 4.1.1版本 http://photoswipe.com/documentation/getting-started.html ...

  9. mysql 开启慢查询记录

    Linux查看mysql 安装路径 一.查看文件安装路径 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装 ...

  10. anki插件推荐

    记忆是一件需要反复重复的事情,可是怎么花最小的代价来重复呢? 著名的艾宾浩斯遗忘曲线是一个统计学的概念,非常具有参考价值,但是对于不同的人来说,是有差别的,另外操作起来也比较麻烦. 好在现在有许多记忆 ...