центрирование div внутри div с фоном: покрытие свойство

Question

Я хочу, чтобы центр изображения поверх моего фона.

#home является фоновым изображением растягивается до размеров браузера
#hometitle этого изображения я хочу на верхнем

Я хотел бы сосредоточить #hometitle на вершине моего #home фона так нет независимо от размера браузера, он будет располагаться в центре фонового изображения.

Я пробовал margin: 0 auto; а затем margin-top: 250px; сразу же, но это просто создает белый пробел выше всего фонового изображения 250px;

Позиция: абсолютная; и top/left действительно не помогают, потому что позиция будет статичной и не будет центром при изменении размера браузера.

#home { 
height: 1000px; 
margin: 0 auto; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 
background-image: url("images/bigheader.png"); 
} 

#hometitle { 
background-image:url(images/title.png); 
height: 260px; 
width: 435px; 
} 

HTML:

<div id="home"> 
    <div id="hometitle"> 
    </div> 
</div> 

Answer 1

#hometitle { 
    background-image:url(images/title.png); 
    height: 260px; 
    width: 435px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -130px; 
    margin-left: -217px; 
} 

Это следует сделать, так как мы ПОлОжЕНИЕ домашний Название изображения абсолютно в центре браузера рендеринга пространства. Если у вас возникли какие-то проблемы с позицией изображения добавить

body {position: relative;} 

Это один из самых простых и лучших методов для позиционирования элемента в центре, который я использую часто

Answer 2

Вы не можете использовать margin-top для перемещения <div id="hometitle"> вниз относительно <div id="home"> из-за разворота поля, но вместо этого вы можете добавить верхнее дополнение на <div id="home">.