Overlay that covers only parent div

Question

I have a group of controls inside a div (listbox and buttons below), and I'd like to cover them with a semi-transparent overlay (with a centered loading indicator in it).

Parent div size and position are not fixed.

Here is an example: http://jsfiddle.net/n4fbp8ex/ - Area of interest is inside red border. I'd like it to be covered with an overlay. - "Loading..." div is my overlay. It should cover whole parent div (but nothing else), and text should be centered vertically and horizontally

How do I fix my "centeredOverlay" style?

html:

<div class="halfColumn">
    some content
    <br/>
    <input />
</div>
<div class="halfColumn">
    bla bla
    <br/>
    lorem ipsum
    <div style="border-style:solid; border-width: 1px; border-color: red;">
        <div class="centeredOverlay">Loading...</div>
        <select size=2 style="width:100%; height:50vh">
        </select>
        <button>Click me</button>
        <button>Click me too</button>

    </div>
</div>
<div style="clear:both"></div>
</div>

css:

.centeredOverlay {
  position: absolute;
  background-color: rgba(0,0,0,0.3); /*dim the background*/
}

.halfColumn {
    float: left;
    width: 50%;
}

.halfColumn2 {
    float: right;
    width: 50%;
}

Answer 1

I think this is what you are looking for..although the text has not yet been positioned.

JSfiddle

EDIT - JSfiddle with new span element to center text

.centeredOverlay {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3);
    /*dim the background*/
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:black;
    text-align: center;
}
.halfColumn {
    float: left;
    width: 50%;
}
.wrapper {
    position: relative;
    border-style:solid;
    border-width: 1px;
    border-color: red;
}
.halfColumn2 {
    float: right;
    width: 50%;
}

<div class="main">
    <div class="halfColumn">some content
        <br/>
        <input />
    </div>
    <div class="halfColumn">bla bla
        <br/>lorem ipsum
        <div class="wrapper">
            <div class="centeredOverlay">Loading...</div>
            <select size=2 style="width:100%; height:50vh"></select>
            <button>Click me</button>
            <button>Click me too</button>
        </div>
    </div>
    <div style="clear:both"></div>
</div>

Answer 2

Is this what you're looking for?

.overlayContainer{
    position:relative;

}

.overlay {
  position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0.3;
    background:#b3b3b3;
    text-align:center;
}

http://jsfiddle.net/n4fbp8ex/4/

Answer 3

The inset property is still not widely supported (Safari and Edge lagging behind, as usual) but look how cool it's going to be:

.parent-div {
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
}

.child-div {
  background: rgba(0,0,255,0.5); 
  position: absolute;
  inset: 0;
}

<div class="parent-div">
  <p>blablabla</p>
  <div class="child-div"></div>  
</div>

The child element only needs 2 CSS properties:

position: absolute;
inset: 0;

inset: 0 really is just a shorthand variation of

top:0;
bottom:0;
right:0;
left:0;