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 ...
随机推荐
- 同一个界面内取微信的OPENID和调用微信的分享接口
步骤如下,1:判断URL是否有CODE参数传入,没有则拼接那个微信跳转连接,然后redirect2:有CODE传入,调用微信接口,根据code获取openid和access_token,注意这一步取到 ...
- Linux 监控分析
一.硬件基础 Cpu 逻辑的处理.计算.判断 现代分时多任务操作系统对 CPU 都是分时间片使用的:比如A进程占用10ms,然后B进程占用30ms,然后空闲60ms, 再又是A进程占10ms,B进 ...
- 每日英语: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 -- ...
- gulp-uglify的使用
gulp教程之gulp-uglify 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.js ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- oracle判断查询结果是否为空
create table test1023(id int); --创建测试表 test1023 declare cnt int; begin select count(*) into cnt from ...
- 用Python写一个猜数字游戏
2015.5.25第一天下载Python IDLE,写个猜数字的小游戏来熟悉这门语言: times=6 letters=[100] for i in range(1,times): a = input ...
- javascript mediator pattern
定义 定义一个对象,它封装一组相互作用的对象.中介者促使对象之间保持通讯但是又松耦合,你可以很独立的改变他们的相互作用. 提要 中介者提供一个权威中心,用来控制一组对象之间的相互作用.这种模式在这种情 ...
- Linu 修改maven的setting保护文件
查找目录 find / -name .m2 -d 查看文件: cat settings.xml 修改文件 vi settings.xml 修改后发现保存会出问题,报错W10: Warning: Cha ...
- mysql海量数据处理步骤
本文转自https://segmentfault.com/a/1190000006158186 当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据 ...