So, as promised here is a quick web design tip that I discovered completely by accident the other day.
As the title suggests, if you want to center a single line of text inside of a containing block that has a known height, all you have to do is set the line-height of the text to the height of the block.
For example, if you have a header div with height 100px and want to vertically center an h1 tag inside that div, all you need to do is add the following rule to your css style sheet:
h1 { line-height: 100px; }
This is what it looks like in practice…
Here is some text
Pretty easy, right?
Remember that this will only work if the text you are vertically centering does not wrap to more than one line. If it does the whole thing will break horribly.