Did you find this useful?
Socialize it today.


How to Vertically Center Content Using CSS

Wednesday, April 10, 2013

tags CSS
center vertically

In this tutorial, we are going to cover the various methods of centering content vertically. Centering elements vertically is a task that often introduces additional challenges for web developers. 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 so vertically aligning them is performed in different ways.



Vertical-Align Property

In the previous article, we went through various examples on how to horizontally center content using CSS. Horizontal centering is quite easy to do. In the previous article we learned how to align text by using the text-align: center style. With this in mind, most people try to vertically align content by using the vertical-align: middle style. This may seem logical, especially for those of you who have been developing pages for quite some time and use table-based layouts. Vertical-align works well on table cells and with some inline elements. The use of vertical-align will depend on the element. Let's take a look at some of the examples where we use the vertical-align property.



Display as Table Cells

We can style a block-level element with the display property and value of "table-cell" along with the vertical-align property and value of "middle".  You should note that CSS tables are not the same as HTML tables. In addition, while this will work for most modern browsers, Internet Explorer (IE) version 7 and earlier does not support it.

The HTML

<div class="container">
   <div class="vTableCell">This text is vertically centered.</div>
</div>

The CSS

.container { display: table; }
.vTableCell { display: table-cell;vertical-align: middle; height:200px; }

The Results

This text is vertically centered.



Vertically Align Inline Elements - Images

Some inline elements such as images can be centered vertically using this approach. Images are technically inline level elements, but behave more like inline-block elements. They can be considered block as well since you can set their width and height attributes. This is not the case for most other inline elements. If you are going to use the vertical-align property on images, be aware that not all browsers may treat inline-block elements the same way. Make sure you test this approach using browsers that you expect will be visiting your site.

The HTML

<p>This image is vertically
   <img src="image1.jpg" width="128" height="64" />
on this line.</p>

The CSS

p {font-size:large;}
img { vertical-align: middle; }

The Results

This image is vertically centered on this line.




Line-Height Method

Using the line-height property, we can vertically center a single line of text. All that you need to is set a line-height on the element containing the text. The line-height needs to be set to a value that is larger than the font-size. This will result in equal space above and below the text and so the text will be located vertically centered.

The HTML

<p class="vCenter">This single line of text is centered vertically.</p>

The CSS

.vCenter { line-height: 100px; }

The Results

This single line of text is centered vertically.


This approach well across all browsers, but for a single line of text. If your text is able to wrap to the second line, you will need to use a different approach. You should also note that when setting the size of the font, you should use font-size instead of the shortcut font. The reason is because the shortcut property includes line-height so if you do not set it in the shortcut property, it will reset the line-height back to the default value of 1.

Tip: If you need to vertically center multiple lines of text, use the table-cell approach described above.



Absolute Positioning with Negative Margins

This technique will work for block level elements regardless of the browser that is used to visit the page. Using this approach, we simply need to set the height of the element we want to center vertically within its parent element. We can use fixed pixels or percentages for the height. In this example, we will use two divs (parent and child) where the child element will be set with an absolute position.

The HTML

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

The CSS

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

The Results

Vertically Centered

You should notice that for both div elements, we set the positioning for the outer (parent) element to relative, while the inner (child) element was set to absolute. In addition, we set the top and left values of the child to be 50% each, which is the center of the parent. However this sets the top left corner to be in the center so more tweaking is needed. To vertically center the child, we need to move the child up by half its height and if we want to horizontally center it as well, move it to the left by half its width. Our example used fixed lengths, but we can use percentages as well if needed. To move the child up and over to the left, we use negative top and left margins that are equal to half of the child's height and width. This technique is specifically used for block level elements.



Conclusion

There is no right and wrong approach here. Some of the techniques in this guide will work better for inline elements while others will work better for block-level elements. You have to consider that some examples listed above may not work in older versions of a certain browser. Always try to use a simple approach that will work for the majority of your users.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS: The Complete Reference HTML CSS and JavaScript Editor