• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / Using CSS To Centre Content

Using CSS To Centre Content

23 June 2009 / 2 Comments

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;
}
To find out how to centre CSS background images, see Controlling background images and colours.

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;
}

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!

Filed Under: CSS Tagged With: css center, css center image, css center page, css center text, css centering, css div center, margin auto, table

Reader Interactions

Comments

  1. abhijit says

    13 August 2010 at 7:23 am

    These tips are basic and useful for the beginners. Thanks for sharing.

    Reply
  2. earthtoMegatron says

    22 December 2012 at 2:43 am

    Perfectly short standard article to refer to for centering. Thanks 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits