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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 18:03:47

original

1098 Les gens l'ont consulté

1、通过css实现水平居中：

复制代码代码如下:

 
.className{ 
margin:0 auto; 
width:200px; 
height:200px; 
} 

2、通过css实现水平居中和垂直居中
通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸：

复制代码代码如下:

 
.className{ 
width:300px; 
height:200px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-100px 0 0 -150px; 
} 

3、通过jQuery实现水平居中和垂直居中前面已经提到过了，css的方法只适用于有固定尺寸的div，所以到jQuery发挥作用了：

复制代码代码如下:

 
$(window).resize(function(){ 
$('.className').css({ 
position:'absolute', 
left: ($(window).width() - $('.className').outerWidth())/2, 
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop() 
}); 
}); 
//初始化函数 
$(window).resize(); 

这种方法的好处是您无需知道div有多大，缺点是它只能通过JavaScript实现。

Étiquettes associées：

Centrer verticalement niveau

Article précédent：js文字链接的热点提示效果代码_文字特效 Article suivant：一个鼠标移动滑出层效果的实现代码_javascript技巧

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur