Using CSS To Centre Content

Centring things horizontally with CSS is straightforward once you learn a couple of techniques. In this article you learn how to centre 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 centring: The basic technique

The trick to centring 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.

Centre a page

To centre 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 centring a page.

Centring images, tables and more

You can centre 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.

Centring an image

Images are displayed inline by default, which means that auto margins have no effect. Therefore, to centre 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;
}

Centring a table

Here’s how you might centre 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;
}

Centring text

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

1. Centre the block of text within the page (using the technique already described)
2. Centre-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>

Centring text within the page

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

Centre-aligning text

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

Centring text within the page and centre-aligning the text

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

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