html - 仅覆盖父 div 的叠加层

Question

我在一个 div 中有一组控件(下面的列表框和按钮)，我想用一个半透明的覆盖层覆盖它们(其中有一个居中的加载指示器)。

父级 div 大小和位置不固定。

这是一个例子:http://jsfiddle.net/n4fbp8ex/ - 感兴趣的区域在红色边框内。我希望它被覆盖层覆盖。 - “正在加载...” div 是我的叠加层。它应该覆盖整个父 div(但没有别的)，文本应该垂直和水平居中

如何修复“centeredOverlay”样式？

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

我认为这就是您要查找的内容..尽管文本尚未定位。

JSfiddle

编辑 - 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>