Centering a Div Both Horizontally And Vertically

April 7, 2010 · Print This Article

While building web page layouts, you’ve probably been faced with a situation where you need to center a div both horizontally and vertically with pure CSS. There are more than a few ways to achieve this, and in this article we are going to show you our favorite involving CSS and jQuery.

But first, the basics:

Horizontal centering with CSS

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

To center a div only horizontally, you need to specify a width, and an auto value for the left and right margins . This method works on block level elements (divs, paragraphs, h1, etc). To apply it to inline elements (like hyperlinks and images), you need to apply one additional rule – display:block.

Horizontal and vertical centering with CSS

Center a div both horizontally and vertically with CSS is a bit more tricky. You need to know the dimensions of the div beforehand.

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

By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Offsetting the div by 50% from the left and the top part of the window, you have its upper-left corner precisely at the center of the page. The only thing we are left to do is to move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.

Horizontal and vertical centering with jQuery
As mentioned earlier – the CSS method only works with divs with fixed dimensions. This is where jQuery comes into play:

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

The functionality is inserted into a $(window).resize() statement, which is executed every time the window is resized by the user. We use outerWidth() and outerHeight(), because unlike from the regular width() and height(), they add the padding and the border width to the returned size. Lastly, we simulate a resize event to kick center the div on page load.

The benefit of using this method, is that you do not need to know how big the div is. The main disadvantage is that it will only work with JavaScript turned on.


Your choice for site templates and wordpress themes

Comments

One Response to “Centering a Div Both Horizontally And Vertically”

  1. International Passengers traffic up 2.3% in 2009 according to Civil Aeronautics Board on September 30th, 2012 2:27 pm

    […] Centering a Div Both Horizontally And Vertically : Live Experience […]

Got something to say?

You must be logged in to post a comment.