夏日博客

A-A+

jquery实现DIV水平和垂直居中代码

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

垂直居中是可以通过css与js来实现了，下面来看两代码实现DIV水平和垂直居中代码，希望能帮助到各位同学哦。

经常有朋友问到有关DIV水平居中和垂直居中的问题，今天就把之前写过的一个jquery实现方法分享出来；

记住，jquery.js不要引用2.0.0版本以上的，要引用1.10.1左右版本的，不然IE9以下不兼容；

兼容各种浏览器：

jquery方法,代码如下:

  1. //页面加载完就执行这个方法  
  2. $(function(){  
  3.  $(".mydiv").css({   
  4.         position: "absolute",   
  5.         left: ($(window).width() - $(".mydiv").outerWidth())/2,   
  6.         top: ($(window).height() - $(".mydiv").outerHeight())/2   
  7.     });    
  8. })  
  9. //改变窗口大小时执行这个方法  
  10. $(window).resize(function(){   
  11.     $(".mydiv").css({   
  12.         position: "absolute",   
  13.         left: ($(window).width() - $(".mydiv").outerWidth())/2,   
  14.         top: ($(window).height() - $(".mydiv").outerHeight())/2   
  15.     });          
  16. });  

通过css实现水平居中和垂直居中

通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸,代码如下:

  1. .className{   
  2. width:300px;   
  3. height:200px;   
  4. position:absolute;   
  5. left:50%;   
  6. top:50%;   
  7. margin:-100px 0 0 -150px;   
  8. }  
标签：

给我留言