Centrer verticalement et horizontalement du texte dans un div

Question

J'ai une div qui comprend un arrière-plan graphique recouvert de texte. Je veux centrer cet élément horizontalement et verticalement. Mais je n'arrive pas à centrer le texte verticalement. Jusqu'à présent, j'ai le code suivant:

<div id="step"> 
    <div id="background"> 
     <img src="buttonbackground.png" class="stretch" alt="" /> 
    </div> 
    <div> 
     <h3>some text</h3> 
    </div> 
</div> 

Dans le CSS:

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    z-index: -1; 
} 

#step { 
    text-align:center; 
    color:white; 
} 

.stretch { 
    width:200px; 
    height:40px; 
} 

Utilisation de la table-cell/technique verticale-align que j'ai vu le fait souvent ailleurs référencé travail pas tout à fait.

Answer 1

Étant donné que c'est un H3, je suppose que c'est un en-tête, donc ça va probablement être une ligne de texte. Si c'est le cas, il suffit de définir le line-height du h3 à la hauteur du conteneur.

Si, au contraire, il est un paragraphe que vous pouvez faire ceci:

#centeredDiv { 
    position:absolute; 
    top: 50%; 
    left: 50% 
    margin-top:-20px ;(half the height of the container) 
    margin-left: -100px; (half the width of the container) 

}

Ne pas mélanger des pixels avec des pourcentages.

Answer 2

Essayez:

#step { 
    text-align: center; 
    vertical-align: center; 
    color: white; 
    height: 40px; 
} 

EDIT:

Sinon, vous pouvez essayer de définir explicitement la hauteur de #background à 40px au lieu de 100%. Cela devrait avoir le même effet.