divを垂直に中央に配置するにはどうすればよいですか？

Question

可能性の重複：今
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; 
} 

、動作するようには思えません。トップ50％はそれを垂直にセンタリングしません。それは少し下です。あたかもトップボーダーが50％であるかのようです。

Answer 1

あなたはボックスの高さを指定することができれば、あなたは[height/2]を記入し、ほとんどのブラウザは端数ピクセルを丸めますのでご注意（margin-top: -[height/2]pxを使用することができます100％ズーム時にアップ）。子供の内容が複数行に折り返すことが予想されている場合は、

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; 
} 

あなたはサブでそれをラップすることができます：あなたは、親の高さを指定することができた場合は

、あなたはこのような何かを行うことができます子はline-heightをリセットします。

Answer 2

How to vertically center a div for all browsers?

Answer 3

top: 50%;あなたが疑う正確に何が行われます。それは、50％の高さでトップエッジを配置します。要素の高さの半分に等しい負の垂直マージンを適用することによって、この効果を相殺することができます。例えば要素が100pxに高いだった場合、このプロパティを追加します。

margin-top: -50px; 

Answer 4

要素の高さが固定されている場合は、

の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)** 
} 

ダイナミックな高さのdivを中央には、JavaScriptが必要です。..

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