MicroTut: Centering a Div Both Horizontally And Vertically

Go Back To The Tutorial »

View the examples separately to see the code in practice - Example 1 | Example 2 | Example 3
.className{
	width:270px;
	height:150px;
	margin:0 auto;
}
.className{
	width:270px;
	height:150px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 -135px;
}
$(document).ready(function(){
						   
 $(window).resize(function(){

  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });
		
 });
 
 // To initially run the function:
 $(window).resize();

});
下载代码说明
X关闭

基于jQuery+CSS的CSS圆角代码

基于jQuery+CSS的圆角框效果,演示一下如何使用jQuery并配合CSS代码实现漂亮的圆角框效果。 提示:本圆角效果在IE下显示有问题,在Opera及火狐及Google浏览器下都没有问题。