HTML5网页设计

jQuery

实现的水平和垂直居中的div层

时间:2014-07-15 20:05来自:未知作者:user点击:
1、通过css样式实现水平居中和垂直居中。 2、通过jQuery实现水平居中和垂直居中则适应。

1、通过css样式实现水平居中和垂直居中

通过css创建一个水平居中和垂直居中的div必须是固定宽度和高度:

.class-name{
	width:400px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -200px;
}

2、通过jQuery实现水平居中和垂直居中则适应不固定尺寸的div,自动计算宽高度定位居中:

$(window).resize(function(){
	$('.class-name').css({
		position:'absolute',
		left: ($(window).width() - $('.class-name').outerWidth())/2,
		top: ($(window).height() - $('.class-name').outerHeight())/2 + $(document).scrollTop()
	});
});
//初始化函数
$(window).resize(); 

当前文章地址:http://www.shejicool.com/web/jquery/465.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐