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:
- Centre the block of text within the page (using the technique already described)
- 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;
}
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.
Centre-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.
Centring text within the page and centre-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 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!
abhijit says
These tips are basic and useful for the beginners. Thanks for sharing.
earthtoMegatron says
Perfectly short standard article to refer to for centering. Thanks 🙂