jquery计算出left和top,让一个div水平垂直居中的简单实例
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水平垂直居中的简单实例的更多相关文章
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 如何用css让一个容器水平垂直居中
方法一: 以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半} ...
- 公司的一个面试题:如何用css让一个容器水平垂直居中?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 七种css方式让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
- DIV在另一个DIV里面垂直居中,水平居中
HTML: <div class="parent"> <div class="children"> <div class=&quo ...
- 关于页面布局中,如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Android App 内存泄露之调试工具(1)
Android App 内存泄露之工具(1) 使用内存监測工具 DDMS –> Heap 操作步骤 启动eclipse后,切换到DDMS透视图,并确认Devices视图.Heap视图都是打开的, ...
- Azure Nosql
patterns & practices https://msdn.microsoft.com/en-us/library/ff921345.aspx Solution Development ...
- yii2 关系...
link($name) 会使用..get$name...即有hasmany和hasone... // update lazily loaded related objects if (!$relati ...
- Log4j常用配置及使用
Log4j常用配置及使用 2016-12-14 目录 1 添加log4j依赖2 使用代码配置并调用log 2.1 代码配置LogConfiguration.java 2.2 调用 2.3 结果3 ...
- Android AlarmManager的一些问题
我开始的代码是这样写的 alarmManager.set(AlarmManager.RTC_WAKEUP, (5*1000), sender); 我的本意是设定五秒后启动闹钟 但是每次都是我设置完闹钟 ...
- ASP.NET MVC4企业级实战目录
http://www.cnblogs.com/jiekzou/p/5625762.html#!comments ******************************************** ...
- SpringMVC之学习(2)值得接收和传递
springmvc中 @Controller 来标识一个控制器 @RequestMapping来标识请求路径,可以写在类名上,也可以写在方法名上.写在类,表示所有的方法都在此路径下. package ...
- sql经典语句收集
1随机取出10条数据 select top 10 * from MA_LOT order by newid() 2.随机选择记录select newid() 3.列出数据库里所有的表名select n ...
- 爬取千万淘宝商品的python脚本
import time import leveldb from urllib.parse import quote_plus import re import json import itertool ...
- 【转】Visual Studio常用快捷键
Shift+Alt+Enter: 切换全屏编辑 Ctrl+B,T / Ctrl+K,K: 切换书签开关 Ctrl+B,N / Ctrl+K,N: 移动到下一书签 Ctrl+B,P: 移动到上一书签 ...