【jquery实现div水平和垂直居中显示】jquery实现DIV水平和垂直居中代码

更新时间:2019-07-19    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

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

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

兼容各种浏览器

jquery方法

 代码如下

//页面加载完就执行这个方法
$(function(){
 $(".mydiv").css({
        position: "absolute",
        left: ($(window).width() - $(".mydiv").outerWidth())/2,
        top: ($(window).height() - $(".mydiv").outerHeight())/2
    }); 
})
//改变窗口大小时执行这个方法
$(window).resize(function(){
    $(".mydiv").css({
        position: "absolute",
        left: ($(window).width() - $(".mydiv").outerWidth())/2,
        top: ($(window).height() - $(".mydiv").outerHeight())/2
    });       
});

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

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

 代码如下

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

本文来源:http://www.bbyears.com/wangyezhizuo/58929.html