Absolute Horizontal And Vertical Centering In CSS (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/)

absolute-centre.css

/*
 * Sourced from Smashing Magazine article:
 * http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
*/

/*
 * Absolutely centered on the page (both horizontally and vertically).
 * You can place your content block inside of a position: relative container
 * to perfectly center your content within the container.
 */
.absolute-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

/*
 * Centered within viewport.
 * A note - in mobile Safari the content block will be centered vertically
 * in the whole document, not the viewport, if it is not within a
 * position: relative container.
 */
.absolute-center.is-fixed {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
}

/*
 * Perhaps the best benefit of Absolute Centering is that percentage-based
 * width/heights work perfectly! Even min-width/max-width and
 * min-height/max-height styles behave as expected for responsive boxes.
 */
.absolute-center.is-responsive {
    width: 60%; 
    height: 60%;
    min-width: 400px;
    max-width: 500px;
    padding: 40px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}