1. Technology

How to Center Anything with Cascading Style Sheets (CSS)

How to Center Images, Center Text, and Center Blocks

By

Centered arrows
Image courtesy Westend61 / Getty Images

Cascading Style Sheets (CSS) is a great way to center images, blocks of text, and even your entire layout. Most of these properties have been in CSS since version 1, and they work great with CSS3.

Centering is an alignment that can be very useful for web designers. And CSS is the best way to center everything.

Centering with CSS is a challenge for many beginning web designers. That is because there are so many different ways to center things and not all techniques work on every element. But it’s a good idea to learn how to center things with CSS because using the HTML CENTER element is deprecated and may not be supported in the future.

There are four ways to center things using CSS:

  • centering text
  • centering a block
  • centering an image
  • vertically centering a block or image

Centering Text with CSS

The easiest thing to center is text. There is only one style property you need to know to center text: text-align. Here is how you center paragraphs with the class “center”:

p.center { text-align: center; }

Every paragraph written with the “center” class will be centered horizontally inside the parent element, or the width of the paragraph if that is set. Here’s the associated HTML:

<p class="center">This text is centered.</p>

See an example of centered text.

Some things to remember when centering text with the text-align property:

  • Text that is centered with the text-align property will be centered within the container element.
  • This is an alignment of the text, like left alignment, right alignment, and justified alignment. It doesn’t move the entire block of text to the center.

Centering Blocks of Content with CSS

Blocks are any element on your page that has a defined width. This includes layout blocks.

The proper way to center blocks with CSS is to set both the left and right margins to auto. Here is the CSS:

div.center {
  margin-left: auto;
  margin-right: auto;
  width: 8em;
}

And this is the HTML that applies to:

<div class="center">This entire block is centered, but the text inside it is left aligned.</div>

As long as your block has a defined width, it will center itself inside the containing element. But any text that is contained in the block will not be centered.

See an example of a centered block.

Centering Images with CSS

Images are a little trickier. While most browsers will display images centered using the same text-align property, it’s not a good idea to rely on that technique, as it is not recommended by the W3C. Instead, you should explicitly tell the browser that the image is a block element. Then you can center it as you would a block. Here is the CSS:

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

And here is the HTML that is centered:

<img src="blwebcam-sample.jpg" alt="Suni" class="center" />

See an example of a centered image.

Vertically Centering Elements using CSS

Centering things vertically has always been challenging with CSS, but with the release of the CSS Flexible Box Layout Module in CSS3, there is now a way to do it, but it is still pretty challenging to understand, and not all browsers support it.

There is a way to trick some browsers into displaying contents of an element vertically centered, but it doesn’t work well in older browsers (IE7 and lower). This is how the W3C recommends you center text vertically until the CSS3 flex-box is better supported and underestood.

How to vertically center items in a container:

  1. Place the elements to be centered inside a containing element, such as a DIV.
  2. Set a minimum height on the containing element.
  3. Declare that that containing element is a table cell.
  4. Set the vertical alignment to "middle".

For example:

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

And here is the HTML:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

See an example of vertically centered text in a box.

In the meantime, you can use margins and padding to get some effect of centering in Internet Explorer 7 and lower, but it won’t be 100%.

There are some ways to force IE to center and then use conditional comments so that only IE sees the styles. But they are ugly. I’d rather just wait for real vertical centering to be supported in the browser.

Center Your Entire Page

Centering the entire contents of your web page depends upon whether you’re using a fixed width layout or a liquid layout.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Beginning CSS
  6. How to Center Anything with Cascading Style Sheets (CSS)

©2014 About.com. All rights reserved.