Two methods for vertical centering in CSS

markup.html

<div id="outer">
    <div id="inner">Element to be aligned</div>
</div>

method1.css

#outer {
    display: table;
    width: 100%;
    height: 100%; /* Height can be anything */
}
#inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

method2.css

#outer {
    width: 100%; /* Firefox needs this */
        
    height: 100%; /* Height can be anything */
        
    /* WebKit (Chrome & Safari) */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    
    /* IE */
    display: -ms-box;
    -ms-box-pack: center;
    -ms-box-align: center;
    
     /* Native CSS */
    display: box;
    box-pack: center;
    box-align: center;
}