Центрирование div внутри другого div и по изображению

Question

Я пытаюсь создать сайт с одной страницей. Идея состоит в том, чтобы иметь 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; 
} 

Так что я ищу решение, что, где я буду иметь возможность расположить все внутри строки сОн относительно ряда дел.

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 и для абсолютного внутреннего положения.