Using CSS To Center Content

Shows how to center any type of Web page content horizontally using CSS. Includes examples with explanations.

Centering things horizontally with CSS is straightforward once you learn a couple of techniques. In this article you learn how to center any type of content, such as a block of text, an image, a table, a div element, or an entire page, all using CSS.

CSS centering: The basic technique

The trick to centering an element with CSS is to give the element a left and right margin value of auto:


#myElement
{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

Note that you need to specify a width for the element when using this technique, otherwise the browser has no way of knowing the intended width.

Center a page

To center all the content in a page horizontally within the browser window, first make sure the content is inside a container div element, and give the div a width. You can then apply auto margins to the div:


#container
{
  width: 40em;
  margin-left: auto;
  margin-right: auto;
}

Here's an example of centering a page.

Centering images, tables and more

You can center any content using the same technique. Just remember that you have to give the content element a width. This can be a fixed width, such as pixels or ems, or a percentage width.

Centering an image

Images are displayed inline by default, which means that auto margins have no effect. Therefore, to center an image you need to display it as a block-level element:


#myImage
{
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

To find out how to center CSS background images, see Controlling background images and colours.

Centering a table

Here's how you might center a fixed-width table:


#myTable
{
  width: 10em;
  margin-left: auto;
  margin-right: auto;
}

...and a percentage-width table:


#myTable
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

Centering text

Text content is a bit of a special case. There are 2 ways to center text with CSS:

  1. Center the block of text within the page (using the technique already described)
  2. Center-align the text itself, using the text-align: center property

You can use both techniques at the same time if needed.

Here are some examples — they all use this markup:


<div id="myText">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Centering text within the page


#myText
{
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Center-aligning text


#myText
{
  width: 20em;
  text-align: center;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Centering text within the page and center-aligning the text


#myText
{
  width: 20em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

That's it! You now know how to center any type of content — whether it's a div, an image, a table, some text, or the whole page — using pure CSS. Have fun!

Follow Elated

Related articles

Responses to this article

2 responses (oldest first):

13-Aug-10 07:23
These tips are basic and useful for the beginners. Thanks for sharing.
22-Dec-12 02:43
Perfectly short standard article to refer to for centering. Thanks

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page