Testo centrato verticalmente nella parte superiore dell'immagine - html, css

Come si centra verticalmente un testo nel mezzo di un contenitore banner con tag immagine?

Il mio risultato di ricerca sta usando display: table / display:tabella-cella o display: blocco in linea ma quelle soluzioni non funzionavano quando abbiamo il tag immagine. Penso di dover avere una posizione assoluta per il testo, ma poi come assicurarsi che sia sempre centrato verticalmente e orizzontalmente quando si ridimensiona la finestra?

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

e Css come di seguito:

.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

Mi chiedo quale sia la soluzione per questo?

Grazie

risposte:

aggiungi questa trasformazione alla classe elencata qui:

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

Fork Demo

Dai un'occhiata a questa guida per maggiori informazioni: Centraggio nei CSS

Il modo più conciso per fare ciò di cui hai bisogno è il seguente:

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