How to center align a glyphicon to the middle of the page at all screen sizes

Question

I have a glyphicon that i have to align in the middle of the page at all times no matter what screen size it displays on how would i achieve this and where am i going wrong?

HTML

<div id='overlay'>
    <div class="container">
        <div class="middle-loading-box">
            <div class="center-block">
                <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
            </div>
        </div>
    </div>
</div>

CSS

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.middle-loading-box .div.center-block .glyphicon{
    margin: 0 auto;

}
.middle-loading-box{
    border: none;
    width: 38px;
    height: 36px;
    margin: 0 auto;
    display: block;
    text-align:center;
    padding-top:1px;
}
.glyphicon-refresh:before ,.glyphicon-refresh:after{
    color: orange;
    font-size: 30px;
    text-align:center;
}

JQUERY

$(function() {
    var docHeight = $(document).height();
    $("body").append("<div id='overlay'></div>");
    $("#overlay")
    .height(docHeight)
    .css({
        'opacity' : 0.7,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background': '#000000',
        'width': '100%',
        'z-index': 5000
    });
});

Link to my JS.fiddle

Answer 1

Add

   position: fixed;
   top: 50%;
   left: 50%;
   margin-top:-16px;
   margin-left:-16px;

to .middle-loading-box

http://jsfiddle.net/f709psLh/2/

Answer 2

Is this what you're looking for?

http://css-tricks.com/centering-in-the-unknown/

Answer 3

Maybe a simpler solution :

.glyphicon {
    position: absolute;
    top:50%; 
}

Answer 4

Another solution is to use display: table like this:

js

$(function () {
    var docHeight = $(document).height();
    $("body").append("<div id='overlay'></div>");
    $("#overlay")
        .height(docHeight)
        .css({
        'opacity': 0.7,
            'position': 'relative',//change position to relative
            'top': 0,
            'left': 0,
            'background': '#000000',
            'width': '100%',
            'z-index': 5000,
            'display': 'table'// add display table
    });
});

css

.container {
    display: table-cell;/*Add display table cell*/
    vertical-align: middle;/*Add vertical align middle*/
}

fiddle