问答社区更多 >

实现box水平和垂直居中

作者：cidy20172018.01.26来源：Web前端之家浏览：13160评论:0

关键词：JQuery JS

通过css实现水平居中：

1、通过css实现水平居中：

.className{ 
    margin:0 auto; 
    width:200px; 
    height:200px; 
}

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

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

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

3、通过jQuery实现水平居中和垂直居中前面已经提到过了，css的方法只适用于有固定尺寸的div，所以到jQuery发挥作用了：

$(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实现。

赏您的支持是我们创作的动力！