How can I vertically center text in a dynamically high div?

http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div

HTML

<div style='float:left; margin-right: 30px;'>
    <!-- Note that closing </span> tag and opening <p> tag are on same line-->
    <span></span><p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>

<div style='float:left; margin-right: 30px;'>
    <!-- Note we added whitespace between </span> and <p> tag. It will break the trick -->
    <span></span> <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>

<div style='float:left'>
    <!-- Note we moved <p> tag to new line. It will also break the trick -->
    <span></span>
    <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
</div>

CSS

div { 
    background: yellow; 
    color: red;
    width: 120px;
    text-align: center; /* horizontally center */
    height: 300px; /* any height */
    padding: 0 20px
}

div span:first-child {
    height: 100%;
    vertical-align: middle;
    display: inline-block; 
}

div p {
    margin: 0;        
    vertical-align: middle;
    display: inline-block; 
}