How to Center an Object in CSS

In this article, we go over how to center an object in CSS.

Above you can see 2 menus, one which is floated to the left and the other which is centered in the middle of the page.

The 1st menu, the one floated to the left, looks way more awkward than the centered menu, because we're used to seeing menus centered in web pages, just as we do many other objects on the web.

So how can we center objects, such as the menu shown above?

To center an object, in that object's div tag, use the following line of code:

margin: 0 auto;

This line of code placed in the object's div tag will center it on the page.

HTML Code

So the full HTML code to create the menu is:

<div id="container"> <h1>How to Create a Horizontal Menu in CSS</h1> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Register</a></li> </ul> </div>

And the CSS to style this div named container so that it is centered on the page is:

#container { width:960px; margin: 0 auto; }

So it's pretty simple to achieve this. Centering objects have wide and broad uses such as the menu shown above.