HTML-CSS overlay covering whole page with centered

Question

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/

[edit]
Sorry for my English. I meant "above", not "under"...

It should look like:

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

Answer 1

Try this,

 .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 {
        height: auto;
        margin-left: auto;
        margin-top: auto;
        width: auto;
    }

    .loader-center {
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        left: 50%;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
    z-index:1;
    }

    .loader-text {
        color: #FFF;
        font-size: 18px;
    z-index: 1;
    }

Ive added z-index to the image and loader text :)

Answer 2

Edit

I didn't know you wanted to let the image appear above the text. I've changed your code a little bit: 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%;
}

Answer 3

You just need to add a z-index to the image (and the associated class required to the HTML element):

.loader-img {
    z-index: 10;
}

http://jsfiddle.net/bLz7wgvs/4/

Otherwise, you can just replace the order of the elements in the DOM if you have control over this. Siblings will appear above other siblings if they appear after them in the DOM tree As stated in the spec:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stackingcontext.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

So you can just change the markup to:

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

http://jsfiddle.net/bLz7wgvs/6/