`

div absolute 居中

阅读更多
很多情况下,我们需要在网页上弹出dialog,需要水平垂直居中。而且可以做到自动适应窗口变化

对于页面绝对定位,垂直居中
var h = $(this).height();  
var oh = $(this).outerHeight();  
var mt = (h + (oh - h)) / 2;  
$(this).css("margin-top", "-" + mt + "px");  
$(this).css("top", "50%");  
$(this).css("position", "absolute");  


对于页面绝对定位,水平居中
var w = $(this).width();  
var ow = $(this).outerWidth();    
var ml = (w + (ow - w)) / 2;      
$(this).css("margin-left", "-" + ml + "px");  
$(this).css("left", "50%");  
$(this).css("position", "absolute");  

原文链接地址:http://www.jquery001.com/jquery-plugin-center-object-exactly.html
分享到:
评论

相关推荐

    div完美自适应动态上下左右居中

    复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...

    JS实现div居中示例

    /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*left:50%; top:50%; margin-left:-200px; margin-top:-100px;*/ border:1px solid #00F; } #...

    使用css实现div垂直居中的示例

    复制代码代码如下:<!... <head> <meta charset=”utf-8″ />... /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; left:50%; top:50%;

    jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果。分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery [removed][removed] 2.在页面的head中加入浮动层和遮罩层的样式 <style> #...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...

    DIV水平垂直居中css实现代码

    主要代码: position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    css 水平居中,垂直居中,自适应宽度的代码

    亮绿色,是一个多余的DIV,就是为了让深绿色的DIV水平居中。  以下是实现代码:  pos元素的float:left或都用position:absolute;都可以,因为这两个属可以宽度自适应。  先这个多余的DIV亮绿色,水平50%移动...

    基于jQuery实现的水平和垂直居中的div窗口

    } 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 代码如下: .className{ width:300px; height:200px; position:absolute; ...

    固定宽高的DIV如何绝对居中

    当然,position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。 如果有边框,那么,margin元素需要做一点微调。 代码如下: 复制代码代码如下: <!...

    固定宽高且DIV绝对居中实现思路及示例

    当然,position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性。 如果有边框,那么,margin元素需要做一点微调。 代码如下: 复制代码代码如下: <!...

    DIV+CSS 全屏垂直居中的一个办法

    我是先定了一个点在中间,然后再把里边的这一块居中处理; <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0033FF; width:300...

    div居中显示的css样式代码

    复制代码代码如下: <style type=”text/css”>...} /* 让内容垂直居中的控制样式在下面这一行 */ #PageMain{width:1002px; height:602px; background-color:#0E4980; margin:0 auto; position:absolute;

    CSS 将两个button按钮垂直+水平居中

    这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 **margin:auto;**...

    JavaScript+div 半透明弹出层

    newDiv.style.position = "absolute"; newDiv.style.zIndex = "9999"; newDiv.style.width = "500px"; newDiv.style.height = "300px"; newDiv.style.top = "50px"; //newDiv.style.left = (parseInt(document....

    JS实现图片垂直居中显示小结

    <div class=center>居中效果</div> </div> /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray...

    一个上下左右都居中的CSS+html写法

    上下左右都居中的CSS+html写法,position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;

    设置一个层在浏览器中同时左右居中上下居中水平垂直居中

    复制代码代码如下: div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } 说明:margin属性中的两个-100px分别为width和height属性值的...

    CSS各种居中布局方法汇总

    特别说明:在元素设置position:absolute;来设置居中效果时,除去博客下介绍的css3方法外,还可以使用负的margin来居中,这样解决了兼容性的问题,但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半)。宽...

    div style常用属性介绍及使用示例

    一、常用属性: 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例: 复制代码代码如下: <div xss=removed> </div> 3、margin:用于设置DIV的外延边距,也就是到父容器的距离。 例: 复制代码代码如下: <div...

Global site tag (gtag.js) - Google Analytics