将 div 元素置于父元素 div 与 css 的叠加层中？

Question

我在父级 div 上使用 div 叠加层，并希望将另一个 div 叠加层居中。这和我来的一样接近：

.parent { 
        width: 400px; 
}

#aoa55a92 { 
        background: rgba(0,0,0,0.8); 
}

.aoa_wrap {
        position: relative;
        z-index:999;
}

.aoa_overlay {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        background: rgba(0,0,0,0.8);
        z-index:9999;
        color:#fff;
        overflow:hidden;
}

.aoa_object {
        display: inline-block;
        width:100%;
        text-align:center;
        vertical-align:middle;
        overflow:hidden;
        margin: 0 auto;
}

<html><body>


<div class='parent'>

<div class="aoa_wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div id="aoa55a92" class="aoa_overlay">
        <div class="aoa_object">I want this in center</div>
    </div>
</div>

</div>


</body>
</html>

有人能指出我正确的方向吗？

Answer 1

只需添加：

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

到您的 .aoa_object class 将使它垂直居中。

.parent { 
        width: 400px; 
}

#aoa55a92 { 
        background: rgba(0,0,0,0.8); 
}

.aoa_wrap {
        position: relative;
        z-index:999;
}

.aoa_overlay {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        background: rgba(0,0,0,0.8);
        z-index:9999;
        color:#fff;
        overflow:hidden;
}

.aoa_object {
        display: inline-block;
        width:100%;
        text-align:center;
        vertical-align:middle;
        overflow:hidden;
        margin: 0 auto;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
}

<div class='parent'>

<div class="aoa_wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div id="aoa55a92" class="aoa_overlay">
        <div class="aoa_object">I want this in center</div>
    </div>
</div>

</div>

将 div 元素置于父元素 div 与 css 的叠加层中？

Center div element in an overlay over the parent div with css?

html

css

overlay