使用css覆蓋父div上的中心div元素？

我使用一個div覆蓋在父DIV，並想在中心覆蓋的中間另一格的權利。因爲我來這是接近：使用css覆蓋父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>

有人能指出我在正確的方向？

來源

2015-11-06 johnh10

[這是一個最近的問題]（http://stackoverflow.com/questions/33404950/vertically-align-div-to-middle-of-element/33405293#33405293）這是頗爲相似 - [垂直對齊的div元素的中間（http://stackoverflow.com/questions/33404950/vertically-align-div-to-middle-of-element/33405293#33405293） – justinw

簡單地增加：

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>

來源

2015-11-06 18:59:09 justinw

謝謝！之前從未使用過轉換。工作很好。 :) – johnh10

@ johnh10很高興幫助！ – justinw

真棒。它幫助我的CSS問題。你能解釋一下變形和頂級作品嗎？ – MA1

使用css覆蓋父div上的中心div元素？

回答

相關問題