How to Horizontally Center Content Using CSS

In this tutorial, we are going to cover the various methods of centering content horizontally. There are various solutions with regard to centering, and they all depend on exactly what type of content you want to center.

The reason is that HTML elements used for content can either be inline-level elements or block-level elements. Both of these types of elements behave differently. Just as the browser has built-in styles for these elements, we can apply our own styles so that we override built-in styling.

Centering Text

Centering text within an element is a very easy task. You can simply use the CSS text-align styling property to center the text. Previous, the HTML <center> element was used.

However, it is now deprecated so you should not use this HTML element for centering text or elements.

The HTML

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

The CSS

.centerText {
    text-align: center;
}

Horizontally Center an Element

In this example, we will center a block-level element such as a div. We want the div to remain in the center (horizontally) of the window, no matter what the size of the window is.

Because the window size may change, we can not use absolute positioning to place it at a specific point because the element will not be centered for different window sizes. All we need to do is apply a set width and auto margin settings.

As long as your block has a width set, it will be centered inside the containing element, assuming non-absolute positioning. However, the text that is contained inside of the block element will not be centered.

The HTML

<div class="centerBlock">This div element is centered.</div>

The CSS

.centerBlock {
    width: 640px;
    margin:0 auto;
}

Keep in mind for this approach to work, you must declare a width as well as left and right margins. Declaring the height of the element is not needed. In addition, this technique will not help you with regard to vertical centering on the page.

Horizontally Center An Absolute Positioned Element

In this example, we will center an element with an absolute position within another element that has a relative position.

The HTML

<div id="container">
    <div id="content"></div>
</div>

The CSS

#container {
    height: 200px;
    width: 300px;
    background: #a0a0a0;
    margin: 0 auto;
    position: relative;
}
 
#content {
    height: 150px;
    width: 150px;
    background: #ffaa00;
    position: absolute;
    margin-left: -75px;
    left: 50%;
}

In this example, we placed an element with an absolute positioned item inside of a relatively positioned item. To center it horizontally, we need to set work with the left position as well as apply a negative left margin property.

This approach allows you to move the absolute positioned element to the middle of its parent element, then move it to the left 1/2 of its width. This causes the element to be placed exactly in the horizontal center of its parent element.

How About Fluid Widths?

With more and more responsive web designs, static widths are being used less and less. In the following example, rather than applying a static width, percentages are used.

#container {
    height: 200px;
    width: 70%;
    background: #a0a0a0;
    margin: 0 auto;
    position: relative;
}
 
#content {
    height: 150px;
    width: 70%;
    background: #ffaa00;
    position: absolute;
    margin-left: -35%;
    left: 50%;
}

Horizontally Center an Image

Centering an image or images can be a little bit trickier. One approach is to place the image or images within a block-level element such as a div and apply the text-align: center styling.

While most browsers will display the image or images centered within the element, using the text-align property, it is not recommended by the W3C.

The preferred approach is to instruct the browser that the image is a block element. As a block element, you can center it as you would in the previous example.

The HTML

<img class="centerImage" src="image1.jpg" alt="landscape" />

The CSS

.centerImage {
    display: block;
    margin:0 auto;
}

Conclusion

So as you can see, it is important to get a grasp on the behavior of the elements you are trying to manipulate.

With a little bit of practice, you should be able to handle just about almost any centering situation using CSS.