A pure CSS mask which centralizes content inside. ( http://josephj.com/lab/2012/mask/demo.html )

mask.scss

@import "compass";
/**
 * A pure CSS mask which centralizes content inside.
 * This technique is compatible with IE7+ and major standard browsers.
 *
 * Required HTML structure:
 *
 *     <div class="mask">
 *         <div class="mask-box">
 *             <div class="mask-inner-box">
 *                 <div class="mask-content">CONTENT HERE</div>
 *             </div>
 *         </div>
 *     </div>
 */
.mask {
    background: rgba(0, 0, 0, 0.7);
    // For IE 7-8 which doesn't support CSS rgba.
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAA1BMVEUAAACnej3aAAAAAXRSTlOqduWSkAAAAAtJREFUCB1jYMAHAAAeAAEBGNlaAAAAAElFTkSuQmCC)\9;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%\9;
    height: 100%\9;
    // For IE 6 whcih doesn't support DataURI and positoin:fixed.
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/lab/2012/mask/bg.png", sizingMethod="scale");
    _position: absolute;
    _zoom: 1;
    .mask-box {
        display: table;
        height: 100%;
        width: 100%;
        .mask-inner-box {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            // The following is hacks for IE7. Any better solution?
            *position: absolute;
            *top: 50%;
            .mask-content {
                *position: relative;
                *top: -60%;
                *left: 0;
            }
        }
    }
}
body {
    _height: 100%;
    _position: relative;
}