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");

      }

时间: 2024-10-13 13:16:49

jquery计算出left和top,让一个div水平垂直居中的简单实例的相关文章

公司的一个面试题:如何用css让一个容器水平垂直居中?

原文:公司的一个面试题:如何用css让一个容器水平垂直居中? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; bo

逆战班第三周 定位实现一个元素水平垂直居中的方法

我们在写页面的时候,经常会遇到一种需求,就是想让一个元素水平垂直居中,这种需求分两种情况,一种是相对于父元素,一种是相对于浏览器窗口,这两种情况都有很多种解决方法,但是我们今天就只说怎样用定位去解决元素水平垂直居中的问题 首先说第一种,子元素相对于父元素水平垂直居中 假设我们知道这个子元素和父元素的宽高,比如父元素宽高都是400px,子元素都是200px,为了让他们看起来都比较直观,我们给他一个背景色,在给父元素一个margin100px: 看到的效果就是这样 因为是相对与父元素垂直水平居中,那

让一个div水平且垂直居中

水平且垂直居中分为三种情况: 1.一个浏览器页面中,只有一个div模块,让其上下左右居中: div{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } 2.一个父元素div,一个已知宽度.高度的子元素div(100*200): /*子div样式*/ { position: absolute/fixed; left: 50%; top: 50%; margin-left: -50px; margin-top: -

CSS让一个元素水平垂直居中

第一种方法:用margin+绝对定位的方式 兼容性:IE6,IE7下完全失效 HTML代码: <div id="container"> <div class="center"></div>   </div> CSS代码: #container{   /*基本样式*/   width:500px;   height:500px;   background:#fee;   /*定位方式*/   position:relat

jquery 两个为一组外层加一个div

// 每两个为一组包裹起来        var slides2n = $("#frame").find(".phone-screen:nth-child(2n)").each(function(i){             slides.slice(i*2,i*2+2).wrapAll("<div class='ipad-screen swiper-slide clearfix'></div>");        })

如何用css让一个容器水平垂直居中

直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; border: 1px solid #000000;

用css让一个容器水平垂直居中

阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: center;justify-content: center 方法五:display:flex;margin:auto 方法六:纯position 方法七:兼容低版本浏览器,不固定宽高 总结 这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只

如何让一个DIV水平,垂直方向都居中于浏览器?

<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;width:400px;height:300px;border:1px solid #008800;}--></style><div>让层垂直居中于浏览器窗口</div> 其实解决的思路是这样的:首们需要position:absolute;绝对

让一个元素水平垂直居中的几种方法

1.方法一——margin负 div.box{ weight:200px; height:400px; position:absolute; <!--设置元素的定位位置,距离上.左都为50%--> left:50%; top:50%; <!--设置元素的左外边距.上外边距为宽高的负1/2--> margin-left:-100px; margin-top:-200px; } 优点:兼容性好; 缺点:必须已知元素的宽高: 2.方法二——translate负50% div.box{ w