How to vertically align text in the middle of a div that has a percentage height? [duplicate]

Question

Here is what I have right now. In other divs using vertical-align:middleand setting the line-height to the same value as the height property it should work!The only thing is that in those divs I used pixel dimension and not percentages. Can anybody tell me why this wont work with percentages? also setting the text-sizeto 50% should also make text half the size of the div but it is really really small still? What is going on here?

#chooseStateAlabama {
    width: 20%;
    height: 25%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
    background-size: 100% 200%;
    float: left;
    color: #FFFFFF;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 50%;
    line-height: 25%;
    text-align: center;
    vertical-align: middle;
}

Answer 1

You can use display:inline-block , height:100% and vertical-align:middle to a single element or pseudo element aside the text (before or after): DEMO

#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

If you happen to have more content or more than 1 line, then use an element to wrap it as well and apply to it display and vertical-align. DEMO2 to see behavior