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

时间：2014-10-13 编辑：简简单单来源：一聚教程网

经常有朋友问到有关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; }

上一个：几行代码jquery实现图片放大预览
下一个： js获取鼠标选中的内容代码

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程