CSS Layout How to - Layout Vertically Centering Content with Flexbox CSS3

Question

We would like to know how to layout Vertically Centering Content with Flexbox CSS3.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.align-center-flexbox {<!--   w  w  w . j a  v a  2s . co m-->
    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 : 240px;
    height: 240px;
}
.box1
{
    background-color : #AAA;
    height : 150px !important;
}
.box2
{
    background-color : #CCC;
}
.box3
{
    background-color : #EEE;
}
  </style>
</head>
<body>
  <div class="align-center-flexbox">
    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>
</body>
</html>

The code above is rendered as follows: