基于jQuery实现的水平和垂直居中的div窗口
更新时间：2011年08月08日 23:38:23 作者：
在建立网页布局的时候，我们经常会面临一个问题，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。
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实现。
复制代码 代码如下:
.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实现。
相关文章
在一些购物网站经常会遇到倒计时的功能，例如某些商品在一定期限内搞活动，下面小编给大家分享一段代码关于jquery实现的判断倒计时是否结束代码，希望对大家有所帮助2016-02-02
这篇文章主要介绍了Jquery AJAX POST与GET之间的区别详细介绍的相关资料,需要的朋友可以参考下2016-10-10
当光标移动到某些元素上时，会弹出像tips的提示框，这种效果想必大家都有见到过吧，下面有个不错的示例，大家可以感受下2013-10-10
基于JQuery框架的AJAX实例代码，需要的朋友可以参考下。2009-11-11
Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下，或许对你学习ztree有所帮助2013-02-02
这篇文章主要为大家详细介绍了jQuery实现可以扩展的日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了jQuery实现的网站banner图片无缝轮播效果,结合完整实例形式分析了jQuery结合时间函数实现图片定时轮播切换相关操作技巧,需要的朋友可以参考下2019-01-01
作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式2014-03-03
通过jquery还原含有rowspan、colspan的table的实现方法
通过jquery还原含有rowspan、colspan的table的实现方法，学习jquery的朋友可以参考下2012-02-02
checkbox:click事件触发span元素内容改变的方法
下面小编就为大家带来一篇checkbox:click事件触发span元素内容改变的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论