Отцентрировать изображение на другом изображении
 

Есть раздел сайта. Этот раздел состоит из изображения размером 1926 пикселей в ширину и 565 пиксилей в высоту. Ширина сайта 1000 пикселей.
Как отцентрировать на этом изображение другое изображение или блок.?
Мой код:

<!--Главный блок сайта. Начало-->
<div class="main-block">
<div class="main-block-inside">
<div class="production"><h1>Производство видео для бизнеса, которое увеличивает продажи и генерирует новых клиентов</h1></div>

</div>
</div>
<!--Главный блок сайта. Окончание-->

/*Главный блок сайта. Начало*/
.main-block{
background: url('../img/main.jpg') repeat-x;
margin: 0 auto;
width: 1924px;

}
.main-block-inside{
height: 565px;
width: 1000px;
margin: 0 auto;

}
.production{
width: 1000px;
height: 110px;
background: #367FBE;
text-align: center;
margin: 0 auto;
position: relative; top: 35px; left: -288px;
}
h1{
color: #fff;
font: bold 36px 'Arial Narrow',Arial;
text-transform: uppercase;
padding: 12px 5px;
}
Подскажите, как побороть это?

Крутой наверное раздел... :D

Такое видео действительно существует? :blink: Оно зомбирует челе? :D

Какое видео? Изображение большого размера.

я так понял нужно не только горизонтально но вертикально отцентрировать блок

можно решить посредством свойств контейнера display: table-cell
можно решить по средствам js - запрос на высоту основного контейнера, запрос на высоту центрируемого контейнера, математическая операция высота основного контейнера - высота центрируемого контейнера / 2, задать свойство отступа центрируемму контейнеру. Учесть ресайз окна браузера.
Можно придумать еще кучу способов :)