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();



});

Перейти на главную