Как центрировать выравнивание глификона до середины страницы при всех размерах экрана

Question

У меня есть глификон, который мне нужно выравнивать по середине страницы во все времена, независимо от того, какой размер экрана он отображает на том, как я могу достичь этого и где я иду не так?

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 
    }); 
}); 

Ссылка на мой JS.fiddle

Answer 1

Добавить

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

в .middle-loading-box

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

Answer 2

Это то, что вы ищете?

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

Answer 3

Может быть, более простое решение:

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

Answer 4

Другим решением является использование display: table так:

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