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 because
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 them 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; }
The Results
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; }
The Results
This div element is centered.
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 a 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%;
}
The Results
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; }
The Results
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.
Take a look at the next article in this series where we will cover the basics of vertically centering content using CSS.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources