enavu webdevmania tutsvalley psdestination
visit the enavu network
3 Comments Article Title Overlay

Centering a Div Vertically and Horizontally via pure CSS or with JS

This tutorial goes over a very simple and clean method of Centering a Div or any other block element Vertically and Horizontally.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

This tutorial goes over a very simple and clean method of Centering a Div or any other block element Vertically and Horizontally.

So we begin with our div. Let’s call it div_center.

<div class="div_center">
 Our text can go in here.
</div><!--div_center-->

The only little problem with the pure CSS method is that we need to know the exact width of the element and a good estimation of the height. So we will need to set a width and a height, then add our padding and add those together. You can set the height to Auto and then just not fully center it Vertically. But here is the actual trick. You position the element fixed, then you add a position left of 50% and a position top of 50%. This doesn’t exactly do it just yet, now we take the width divide it by two and the resulting number we use as a negative margin left. Same thing for the height, divide and use as negative margin top. Here is a css example:

.div_center {
	width:490px;
	height:390px;
	padding:5px;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-200px;
}
/* alternatively */
.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:35%;
	margin-left:-250px;
}
/* or if you have a better idea of the height,
assuming the elements height will be around 500px,
you want to use a higher value */

.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:5%;
	margin-left:-250px;
	margin-top:-250px;
}

So now that you know how you can easily do this with pure CSS, it’s even easier with jQuery.

Since you have already grasped the concept from above, here is the jquery:

$(".center_me").css({'margin-top':$(this).height()/-2, 'margin-left':$(this).width()/-2,"position":"fixed","left":"50%","top":"50%"});

Now all you have to worry about is making your element pretty, jquery will take care of everything else!

Hope this helps!

Related posts:

  1. Web Forms: Semantic Mark Up in our Forms [part 2]
  2. Create a Disappearing jQuery Dialog Message (Growl Like)
  3. Quick and Easy Sprites
  4. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
  5. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites

Did you absolutely LOVE this article... share it!

Comments

  • The CSS one is an old trick but the jQuery one is nice! Thanks for sharing..

  • Interesting. I attempted this a while back with position:relative and now it makes sense why i was not 100% comp. – Good to know absolute is good for something.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting