css vertically centering a fixed positioning div

Question

I have the following HTML for a sort-of lightbox project.

th

Answer 1

Here are couple SASS mixins I'm using... I hope this is going to help someone:

// vertically centers as relative
@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


// vertically centers the element as absolute
@mixin vertical-center {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


// horizontally centers the element as absolute
@mixin horizontal-center {
    position: absolute;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


// absolutely centers the element inside of its first non-static parent
@mixin absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}