javascript - 如何在所有屏幕尺寸下将字形居中对齐到页面中间

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/