One of the big problems with using CSS is that there is no easy way to vertically center text in a <div>. I've seen various hacks using negative margins, but sometimes there is a much easier way using the "line-height" property.

NOTE: This only works if you know the height of the <div> and there is only one line of text.

Here is a typical <div> box:

.box {
    height: 75px;
    width: 100px;
    border: 1px solid #666;
    text-align: center;
}

It looks like this:



To vertically center the text, all we need to do is add a line-height value equal to the height of the box:

.box {
    height: 75px;
    line-height: 75px;
    width: 100px;
    border: 1px solid #666;
    text-align: center;
}

Now the text is vertically centered:



This solution is certainly limited, but in certain situations it is very useful.