This is an old revision of the document!

CSS

Ensure your content (header, body, etc everything besides footer) is all wrapped in a <div> with class .content-wrapper 

html,
body {
    height: 100%;
}
 
body {
    display: flex;
    flex-direction: column;
}
 
.content-wrapper {
    flex: 1 0 auto;
}
 
footer {
    flex-shrink: 0;
}

Misc Notes

/* center element vertial & horizontal */
.element {
    display: flex;
    align-items: center;
    justify-content: center;
}