Comment centrer le div verticalement?

Question

Possible en double:
What's The Best Way of Centering a Div Vertically with CSS

.title_text_only{ 
position:absolute; 
width:100%; 
display:none; 
z-index:9; 
top:50%; 
bottom:50%; 
text-align:center; 
color:#fff; 
font-size:18px; 
text-shadow: 1px 1px 1px #666; 
} 

semble À l'heure actuelle, il ne semble pas fonctionner. top 50% ne le centre pas verticalement. C'est un peu en bas. C'est comme si la frontière supérieure était de 50%.

Answer 1

Si vous pouvez spécifier la hauteur de la boîte, vous pouvez utiliser margin-top: -[height/2]px (remplir [height/2] et notez que la plupart des navigateurs arrondir pixels fractionnaires jusqu'à 100% de zoom).

Si vous pouvez spécifier la hauteur de son parent, vous pouvez faire quelque chose comme ceci:

parent { 
    height: [height]px; 
} 
child { 
    /* Make the element part of the inline flow, as vertical-align isn't supported on block elements */ 
    display: -moz-inline-box; /* Old Firefox doesn't support inline-block */ 
    display: inline-block; 
    /* IE < 8 doesn't support inline-block on native block-level elements */ 
    *display: inline; 
    *zoom: 1; 

    /* The interesting bit */ 
    line-height: [height]px; 
    vertical-align: middle; 
} 

Si le contenu de l'enfant devrait envelopper sur plusieurs lignes, vous pouvez l'envelopper dans un sous- enfant qui réinitialise le line-height.

Answer 2

How to vertically center a div for all browsers?

Answer 3

top: 50%; fait exactement ce que vous pensez: il place le haut bord à la hauteur de 50%. Vous pouvez compenser cet effet en appliquant également une marge verticale négative égale à la moitié de la hauteur de l'élément. Par exemple, si l'élément était 100px élevé, vous devez ajouter cette propriété:

margin-top: -50px; 

Answer 4

Si la hauteur de l'élément est fixé, alors ne suit

Css:

.title_text_only{ 
position:absolute; 
width:100%; 
display:none; 
z-index:9; 
**top:50%;** 
bottom:50%; 
text-align:center; 
color:#fff; 
font-size:18px; 
text-shadow: 1px 1px 1px #666; 
**margin-top: -(half the height)** 
} 

autre au centre verticalement une div avec une hauteur dynamique, vous devez javascript ..

document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight/2