Vertical alignment of child elements, using table-cell, flexbox 2009 and CSS3 flexbox http://jsfiddle.net/stephen_james/Q4XpP/2/

examples.html

<h1>Centering items vertically</h1>

<h2>using <code>display : table-cell</code></h2>
<div class="center-align-method-tablecell">
    <div class="align-center">
        Some text
        <div class="box box1">box 1</div>
        <div class="box box2 align-center">box 2</div>
        <div class="box box3">box 3</div>    
    </div>
</div>
http://jsfiddle.net/h9RXJ/2/#run
<h2>using <code>display : box</code> (flexbox 2009 spec)</h2>
<div class="center-align-method-flexbox2009">
    <div class="align-center">
        Some text
        <div class="box box1">box 1</div>
        <div class="box box2 align-center">box 2</div>
        <div class="box box3">box 3</div>    
    </div>
</div>

<h2>using <code>display : flex</code> (flexbox CSS3 spec)</h2>
<div class="center-align-method-flexbox">
    <div class="align-center">
        Some text
        <div class="box box1">box 1</div>
        <div class="box box2 align-center">box 2</div>
        <div class="box box3">box 3</div>    
    </div>
</div>

styles.css

.center-align-method-tablecell .align-center
{
    display : table-cell;
    vertical-align : middle;
}

.center-align-method-tablecell .align-center * 
{
    display : inline-block;
    vertical-align : middle;    
}

.center-align-method-flexbox2009 .align-center
{
    display : -webkit-box;
    display : -moz-box;

    -webkit-box-orient : horizontal;        
    -webkit-box-pack : start;
    -webkit-box-align : center;    

    -moz-box-orient : horizontal;        
    -moz-box-pack : start;
    -moz-box-align : center;    
}

.center-align-method-flexbox .align-center
{
    display : -webkit-flex;
    display : -moz-flex;        
    display : -ms-flex;            
    display : flex;                
    
    -webkit-flex-direction: row;
       -moz-flex-direction: row;
        -ms-flex-direction: row;    
            flex-direction: row;        
    
    -webkit-align-items : center;
       -moz-align-items : center;    
        -ms-align-items : center;    
            align-items : center;        
}

.box 
{
    width : 200px;
    height: 200px;
}

.box1
{
    background-color : #61b7cf;
    height : 150px !important;
    
}

.box2
{
    background-color : #b964d4;
}

.box3
{
    background-color : #f3fd72;
}

"Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true." ~ https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes?redirectlocale=en-US&redirectslug=CSS%2FTutorial%2FUsing_CSS_flexible_boxes