Overlay that covers only parent div - html

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;