【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;
}