Use CSS to Center Images and Other HTML Objects

Centering images, text, and block elements using CSS

Centered arrows
Westend61 / Getty Images

Centering an image, or other parts of a webpage, is a pretty common need when building websites. The proper way to accomplish this visual look is by using Cascading Style Sheets (CSS). Using CSS styles is the proper way to center images, blocks of text, and even your entire layout for a web page. Most of the properties for centering have been in CSS since version 1.0, and they work great with CSS3 and modern Web browsers.

Like many aspects of web design, there are multiple ways to use CSS to center elements in a web page. Let's take a look at some different ways to use CSS to achieve this visual look..

On Overview of Using CSS to Center Elements in HTML

Centering with CSS can be a challenge for beginning web designers because there are so many different ways to accomplish this one style. The difficulty comes from the fact that not all techniques work on every element, which means you need to know when to use which approach.

At a high level, you can use CSS to:

  • Center text
  • Center a block-level element (like a division)
  • Center an image
  • Vertically center a block or an image

Many years ago, Web designers could use the <center> element to center images and text, but that HTML element is now deprecated and no longer supported in modern web browsers - which means you must avoid using this HTML element if you want your pages to display properly and conform to modern standards.The reason this element was deprecated is, in large part, because modern websites should have a clear separation of structure and style.

HTML is used to create structure while CSS dictates style. Because centering is a visual characteristic of an element (how it looks rather than what it is), that style is handled with CSS.

Centering Text with CSS

The easiest thing to center on a webpage is text. There is only one style property you need to know to do this: text-align.

Take the CSS style below, for example:

p.center { text-align: center; }

With this line of CSS, every paragraph written with the center class would be centered horizontally inside its parent element.

Here’s an example of this class applied in the HTML document:

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

When centering text with the text-align property, remember that it will be centered within its containing element and not necessarily centered within the full page itself.

Center-justified text can be difficult to read for large blocks of content, so use this style sparingly. Headline and small blocks of text, like teaser text for an article or other content, are likely fine when centered, but larger blocks of text, like the full article itself, would be challenging to read if the content was fully center justified. Remember, readability is always key when it comes to website text!

Centering Blocks of Content with CSS

Blocks are any elements on your page that have a defined width and are established as a block-level element. Oftentimes, these blocks are created by using the HTML <div> element.

The most common way to center blocks with CSS is to set both the left and right margins to auto.

Here is the CSS:

div.center {
  margin: 0 auto;
  width: 80em;
}

This CSS shorthand for the margin property would set the top and bottom margins to a value of 0, while the left and right would use "auto." This essentially takes any space that is available and divides it evenly between the two sides of the viewport window, effectively centering the element on the page.

Here it is applied in the HTML:

<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. Text contained in that block will not be centered within it, but will be left-justified—text is left-justified in the default in web browsers. If you wanted the text centered as well, you could use the text-align property we covered earlier.

Centering Images with CSS

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-level element. This way, you can center it as you would any other block. Here is the CSS to make this happen:

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

And here is the HTML that for the image that we would like to be centered:

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

You can also center objects using in-line CSS (see below), but this approach is NOT recommended since it adds visual styles into your HTML markup. Remember, we want to separate style and structure, so adding CSS styles to your HTML code with break that separtation and, as such, it should be avoid whenever possible.

<div style="text-align: center;">

Centering Elements Vertically with CSS

Centering objects vertically has always been challenging in Web design, but with the release of the CSS Flexible Box Layout Module in CSS3, there is now a way to do it.

Vertical alignment works similarly to horizontal alignment covered above. The CSS property is vertical-align with the middle value.

.vcenter {
  vertical-align: middle;
}

The downside to this approach is that not all browsers support CSS FlexBox. If you have issues with older browsers, the W3C recommends that you center text vertically in a container using the following method:

  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 containing element as a table cell.
  4. Set the vertical alignment to "middle."

For example, here is the CSS:

.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>

Vertical Centering and Older Versions of Internet Explorer

There are some ways to force IE to center and then use conditional comments so that only IE sees the styles, but they are a bit verbose and ugly.

The good news is that with Microsoft's recent decision to drop support for older versions of IE, those unsupporting browsers should be on their way out soon, making it easier for web designers to use modern layout approaches like CSS FlexBox.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 1/3/17.