There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center:

If you know the height of your containing div, and the height of your inner centered div, or, if you the height of your inner div does not matter, then vertical aligning is simple. However, if you are vertically centering anything that is variable, such as text, vertical centering is more complex and require hacks.

As is evident in the above example, this method really only works for images or other media when you know the exact height of your content. This method should not be used for containing text as a developer really never knows how much text will be contained in the box in the end, and the font size: users should be allowed to increase font size. In our example, the text does not take up the height alloted to the paragraph, so it is not vertically centered, but the containing div (i made the background grey) is centered..

Block level vertical centering via the table display method:

Vertically centering block level elements should be simple simply by using display: table; and vertical-align: middle. Unfortunately, IE6 and IE7 do not understand the value of table and table-cell as values of the display property.

Rendering of the above code: (borders have been added so you can see the effect, and div id is actually unique) has the anticipated look in Firefox, Safari and other CSS compliant browsers, but not in IE, including IE7.:

Rendering of the above code: (borders have been added so you can see the effect):

Works in IE6 and IE7

The concept is that the outer content which is relatively positioned and has a defined height contains an absolutely positioned div that starts 50% from the top of the container div. The absolutely positioned div, in turn, contains a relatively positioned element that has as it’s middle the top of the absolutely positioned div. Look at the colors in IE, and if the above sentence didn’t make sense, it will.

In most of the cases when you are working with HTML div elements you may required to align the div on the desired location of the web page using CSS Horizontal and Vertical alignment. The HTML div tag is nothing more than a container for other tags. Much like the body tag, Div elements are blocking elements and work in the following scenes grouping other tags together. The attributes id, width, height, title and style used with div element, anything else should be engaged for CSS. The below example will guide you to understand how to align the div tag elements Horizontal and Vertical

Poor vertical align still gets a bad rap. While it probably wouldn’t top the list of least used CSS properties (clip may have earned that title), it certainly should get an honorable mention as one of the most avoided and least understood.

I think this is because most coders would expect vertical-align to align an element vertically in its container. Instead it vertically aligns an element in relation to the line-height. For example, #div {vertical-align: middle; } would give us:

While #div {vertical-align: middle; line-height: 2em; } gives us:

To make matters worse, there are other scenarios that may not work as expected. For example:

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it’s use a little bit. The basic usage is like this:

img {
vertical-align: middle;
}

Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does “sit inline” mean exactly? That is where vertical-align comes in.

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. Douglas Heriot has a good roundup of methods on In The Woods of ways to do this.

Baseline

The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don’t line up with the lowest point of the descenders, that isn’t the baseline.

Middle

Perhaps the most common use for vertical-align is setting it to ‘middle’ on icon-size images. The results are generally consistent cross-browser:

The browser does the best job it can centering the pixel height of the text with the pixel height of the image:

Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be:

Text-bottom

Different from the baseline of type, is the bottom of text, where the descenders go down to. Images can be aligned with this depth as well:

Text-top

Opposite of text-bottom, is text-top, the highest point of the current font-size. You can align to this as well. Note that the current font, Georgia, probably has some ascenders taller than those represented here hence the small gap.

Top & Bottom

Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size.

Sub & Super

These values stand for superscript and subscript, so elements aligned with these methods align themselves as such:

Vertical Align on Table Cells

Unlike images, table cells default to middle vertical alignment:

If you would rather see that text aligned to the top or bottom of the cell when it needs to stretch beyond the height that it needs, apply top or bottom vertical-alignment:

When using vertical-align on table cells, sticking with top, bottom, and middle is your best bet. None of the other values make a whole lot of sense anyway, and have unpredictable cross browser results. For example, setting a cell to text-bottom aligns the text to the bottom in IE 6, and to the top in Safari 4. Setting it to sub causes middle alignment in IE 6 and top in Safari 4.

Vertical Align and Inline-Block

Images, while technically inline level elements, behave more like inline-block elements. You can set their width and height and they obey that, unlike most inline elements.

Inline-block elements behave just like images with vertical align, so refer to the above. However, be aware that not all browsers treat inline-block elements the same way, so vertical-align may be the least of your worries. That’s another story though….

Deprecated as an attribute

Occasionally you will see “valign” used on table cells to accomplish vertical alignment. e.g. <td valign=top>. It should be noted that this attribute is deprecated and should not be used. There really isn’t any reason for it anyway as you can do it with CSS anyway.

vertical-align

Understanding how to vertically align elements using the css vertical-align property!