Вертикальний текст у верхній частині зображення - html, css

Як вертикально центрувати текст посередині баннерного контейнера з тегом зображень?

Мій результат пошуку використовує дисплей: table / display:table-cell або display: inline-block, але ці рішення не працювали, коли у нас є тег зображення. Я думаю, що я повинен мати позицію абсолютним для тексту, але потім, як переконатися, що він завжди вертикально і горизонтально центрований при повторному розміру вікна?

Ось html:

<div class="banner">
<img class="" src="/images/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

Мені цікаво, яке рішення для вас?

Дякую

Відповіді:

просто додайте це перетворення до класу, наведеного тут:

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

Демо-вилка

Перегляньте цей посібник для отримання додаткової інформації: Центрування в CSS

Найбільш коротким способом зробити те, що вам потрібно, є наступне:

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