Вертикально центрированный текст в верхней части изображения

Question

Как вы вертикально центрируете текст в середине контейнера баннера с тегом изображения?

Мой результат поиска: дисплей: таблица/дисплей: табличная ячейка или дисплей: встроенный блок, но это решение не работает, когда у нас есть тег изображения. Я думаю, что я должен иметь абсолютную позицию для текста, но затем, как убедиться, что он всегда вертикально и горизонтально центрирован при повторном выборе окна?

Вот HTML:

<div class="banner"> 
    <img class="" src="http://placehold.it/1440x410"> 
    <div class="container"> 
    <div class="banner-text"> 
     <h1>Header Text</h1> 
     <h3>Sub Header Text</h3> 
     <a href="#"> CTA</a> 
    </div> 
    </div> 
</div> 

и Css, как показано ниже:

.banner{ 
    width: 100%; 
    position: relative; 
} 

.banner img{ 
    width: 100%; 
} 

.container{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
} 

.banner-text{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

http://codepen.io/neginbasiri/pen/grEmMx

мне интересно, Что ваше решение для этого?

Благодаря

Answer 1

просто добавить это преобразование к классу перечисленных здесь:

.banner-text{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); /* or of course - translate(-50%, -50%); */ 
} 

Fork Demo

проверить это руководство для получения дополнительной информации: Centering in CSS

Answer 2

Наиболее лаконичный способ сделать вам необходимо следующее:

.banner-text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); /* add me */ 
}