How to Use CSS to Center Images and Other HTML Objects

CSS is the best way to center elements, but it can be a challenge for beginning web designers because there are so many ways to accomplish it. This article explains how to use CSS to center text, blocks of text, and images.

Centering Text With CSS

You need to know only one style property to center text on a page:

.center {
text-align: center;
}

With this line of CSS, every paragraph written with the .center class will be centered horizontally inside its parent element. For example, a paragraph inside a division (a child of that division) would be centered horizontally inside the

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

This text is centered.

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.

Centering Blocks of Content With CSS

Blocks of content are created by using the HTML

.center {
margin: 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:

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. This is because text is left-justified as the default in web browsers. If you want the text centered as well, you could use the text-align property covered earlier in conjunction with this method to center the division.

Centering Images With CSS

Although most browsers will display images centered using the same text-align property, it’s not recommended by the W3C. Therefore, there's always a chance that future versions of browsers could elect to ignore this method.

Instead of using text-align to center an image, you should tell the browser explicitly 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 for the image to be centered:

You also can center objects using inline CSS (see below), but this approach is not recommended because it adds visual styles to your HTML markup. Remember, style and structure should be separate; adding CSS styles to HTML will break that separation and, as such, you should avoid it whenever possible.

Centering Elements Vertically With CSS

Centering objects vertically has always been challenging in web design, but the release of the CSS flexible box layout module in CSS3 provides a way to do it.

Vertical alignment works similarly to horizontal alignment covered above. The CSS property is vertical-align, like so:

.vcenter {
vertical-align: middle;
} 

All modern browsers support this CSS style. If you have issues with older browsers, the W3C recommends that you center text vertically in a container. To do so, place the elements inside a containing element, such as a div, and set a minimum height on it. Declare the containing element as a table cell, and 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:

This text is vertically centered in the box.

Vertical Centering and Older Versions of Internet Explorer

You can force Internet Explorer (IE) to center and then use conditional comments so that only IE sees the styles, but they are a bit verbose and unappealing. Microsoft's 2015 decision to drop support for older versions of IE, however, will make this a non-issue as IE passes out of use.