Vertically Centering content with Flexible Box Model 2009 Draft

by stephen_james

HTML

<div class="align-center-flexbox2009">
    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>

CSS

.align-center-flexbox2009
{
    display : -webkit-box;
    display : -moz-box;
    display : -ms-box;
    display : 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;
    
    -ms-box-orient : horizontal;
    -ms-box-pack : start;
    -ms-box-align : center;
    
    box-orient : horizontal;
    box-pack : start;
    box-align : center;
    
}

.box 
{
    width : 200px;
    height: 200px;
}
 
.box1
{
    background-color : #61b7cf;
    height : 150px !important;
    
}
 
.box2
{
    background-color : #b964d4;
}
 
.box3
{
    background-color : #f3fd72;
}