CSS: how do I vertically-center something?

css:

#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }

html:

   

      Hey look! I'm vertically centered!
      How sweet is this?!
   

alternative way:
rules : You have only a single line of text that you want to center

css:

#myoutercontainer2 { line-height:4em }

html:

   Hey, this is vertically centered. Yay!