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:

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


So the full HTML code to create the menu is:

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

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