源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-06-18 21:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于jQuery实现的水平和垂直居中的div窗口
[b]1、通过css实现水平居中: [/b]
[u]复制代码[/u] 代码如下:
.className{ margin:0 auto; width:200px; height:200px; }
[b]2、通过css实现水平居中和垂直居中 [/b]通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸:
[u]复制代码[/u] 代码如下:
.className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; }
[b]3、通过jQuery实现水平居中和垂直居中前面已经提到过了,css的方法只适用于有固定尺寸的div,所以到jQuery发挥作用了:[/b]
[u]复制代码[/u] 代码如下:
$(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实现。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部