From http://timseverien.nl/2013/10/css-alignment-and-sizing/

alignment.css

/*
1- Horizontally and vertically

Dynamic sized elements

*/

.parent { position: relative; }
 
.child {
    position: absolute;
 
    left: 50%;
    top: 50%
 
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*
2- Horizontally and vertically

Static sized element

*/
.parent { position: relative; }
 
.child {
    position: absolute;
 
    left: 50%;
    top: 50%
 
    height: 250px;
    width: 500px;
 
    /* Translate element based on it's size */
    margin-left: -125px;
    marign-top: -250px;
}


/*
Vertically

Inline and inline-block elements in a static parent
*/
.parent { line-height: 500px; }
 
.child {
    display: inline-block;
    vertical-align: middle;
}

/*
Faking tables.
*/

.parent { display: table; }
 
.child {
    display: table-cell;
    vertical-align: middle;
}