Wyśrodkowany tekst w górnej części obrazu - html, css

Jak wyśrodkować pionowo tekst w środku kontenera baneru z tagiem graficznym?

Mój wynik wyszukiwania wykorzystuje wyświetlacz: tabela / wyświetlacz:table-cell lub display: inline-block, ale te rozwiązania nie działały, gdy mamy tag obrazu. Myślę, że muszę mieć pozycję absolutną dla tekstu, ale potem, jak upewnić się, że jest ona zawsze wyśrodkowana pionowo i poziomo podczas zmiany rozmiaru okna?

Oto 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>

i Css jak poniżej:

.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

Zastanawiam się, jakie jest twoje rozwiązanie?

Dzięki

Odpowiedzi:

po prostu dodaj tę transformację do klasy tutaj:

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

Demo wideł

Sprawdź ten przewodnik, aby uzyskać więcej informacji: Centrowanie w CSS

Najbardziej zwięzłym sposobem na zrobienie tego, czego potrzebujesz, jest:

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