在另一个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和内部位置绝对。