Centering a Div Horizontally

by kirupa   |   29 January 2013

As much as we may like to think that all HTML elements are important and that they each play a unique role in making your documents work, you and I know that is not true. There are certain elements that are just funnier, smarter, nicer, and better looking than the rest. One such element is the very versatile div.

Div elements can be comfortably used across many situations, but one area they are especially comfortable in is layout. Their ability to act as a container without imposing themselves on their surroundings makes them especially popular for layout-related tasks...such as centering things on screen as shown in the following example:

centered window

In this short tutorial, I will explain how you can horizontally center div elements - those positioned normally as well as those positioned absolutely.

Let's get started!

Centering Div Elements

The most common way to horizontally center a div element is to set the margin-right and margin-left properties to auto:

#centerDiv {
    margin-left: auto;
    margin-right: auto;
}

You will often see this represented using the shorthand variation of margin as follows:

#centerDiv {
	margin: 0px auto;
}

This works across all sorts of div elements - ones with a fixed size, percentage size, positioned relative, and so on. The only time this doesn't work is if your div is absolutely positioned with its position property set to absolute. Don't worry, we'll look at that case next.

Centering an Absolutely Positioned Div Element

When a div is absolutely positioned, it pretty much defies the laws of physics. To horizontally center such an element, the margin approach you saw earlier is only partially there. You need to additionally specify the left and right properties with a value of 0px:

#centerDiv {
	margin: 0px auto;
	left: 0px;
	right: 0px;
}

Once you've added the entries for left and right, your absolutely positioned div element will also find itself horizontally centered.

Conclusion

There you have it! A really short tutorial that covers how to center div elements on the screen. If you inspect the CSS for this site (or many other sites that have large sections of content centered), chances are you will see a div that is centered using the exact techniques I've shown here.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!