在另一個div和圖像中居中div

Question

我正在嘗試創建單頁網站。這個想法是爲每個圖像分配一個div（使用bootstrap）。這將爲div創建背景圖像。然後我想把另一個div放在我可以放置文本和其他圖像的位置。我設法使用頂部的位置來工作，但我想使用相對於div的尺寸，以便當它顯示在較小的屏幕中心div中的內容仍然居中，並設置爲適當的大小。

這裏是div：

<div class="row" id="homeRow"> 
    <img id="homeImage" src="imageSource" alt="Example"> 
    <div class="col-md-8 col-md-offset-2" id="homeTitle"> 
     <img src="headingSource" alt="Handwriting Fonts"> 
     <h3>Some content</h3> 
    </div> 
</div> 

有這三個頁面上。我此刻的CSS是這樣的：

#homeRow{ 
height: 800px; 
width: 100%; 
color: white; 
overflow:hidden; 
} 

#homeImage{ 
width: 100%; 
position: relative; 
-webkit-filter:brightness(60%); 
-moz-filter:brightness(60%); 
filter: url(#brightness); 
filter:brightness(60%); 
} 

#homeTitle{ 
position: absolute; 
top: 300px; 
width: 50%; 
font-family: Verdana, Geneva, sans-serif; 
} 

所以我要尋找一個解決方案，我將能夠定位相對於該行的div行div中的一切地方。

Answer 1

#homerow{ 
    ... 
    position: relative; // add this 
} 
#homeTitle{ 
    ... 
    //width:50% - remove this 
    left:25%; // add this 
    right:25%; // add this 
    // those left and right will make width 50% and centered 
} 

實施例：https://jsbin.com/savaqoputo/edit?html,output

Answer 2

#homeRow{ 
height: 800px; 
width: 100%; 
color: white; 
overflow:hidden; 
position: relative; 
} 

#homeImage{ 
width: 100%; 
position: relative; 
-webkit-filter:brightness(60%); 
-moz-filter:brightness(60%); 
filter: url(#brightness); 
filter:brightness(60%); 
} 

#homeTitle{ 
position: absolute; 
top: 50%; 
width: 50%; 
left: 50%; 
font-family: Verdana, Geneva, sans-serif; 
} 

嘗試使用此CSS。你可以使用位置相對外部div和內部位置絕對。