文章/答案/技术大牛

发布

社区首页 >问答首页 >在带有css的父div之上的覆盖层中的中心div元素？

问在带有css的父div之上的覆盖层中的中心div元素？
EN

Stack Overflow用户

提问于 2015-11-06 18:35:33

回答 1查看 2.7K关注 0票数 1

我使用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>

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

overlay

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-06 18:59:09

只需添加：

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

您的.aoa_object类将垂直对齐它。

.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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33573420

复制

相似问题

问在带有css的父div之上的覆盖层中的中心div元素？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在带有css的父div之上的覆盖层中的中心div元素？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在带有css的父div之上的覆盖层中的中心div元素？
EN