HTML-CSS 覆盖层以居中元素覆盖整个页面

I want to create a simple full-screen overlay with loader and text in the center. I have some problems with the text. I want the image to be over ABOVE the text. Can you help me with this?

<div id="loadingOverlay" class="loader-overlay">
    <div class="loader-content loader-center">
        <img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center" alt=""/>
        <div class="loader-center loader-text">Loading, please wait...</div>
    </div>
</div>

http://jsfiddle.net/bLz7wgvs/2/ http://jsfiddle.net/bLz7wgvs/2/

[edit]
对不起我的英语不好。我说的是“上面”，不是“下面”

它应该看起来像：

                               [-------------loader here-------------]
           Loader text (plz wait, etc.) in one line, both centered horizontally and vertically

Edit

我不知道您想让图像出现在文本上方。我稍微改变了你的代码：http://jsfiddle.net/bLz7wgvs/7/ http://jsfiddle.net/bLz7wgvs/7/

CSS:

.loader-overlay {
    -ms-opacity: 0.9;
    background: #444;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 100%;
    z-index: 100000;
}

.loader-content {
    margin-left: auto;
    margin-top: auto;
    width: 50%;
}

.loader-center {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);   
    left: 50%;
    display: block;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -55%);
}

.loader-text {
    color: #FFF;
    font-size: 18px;
    height: 50%;
}