div内の縦と横のセンタリングテキスト

Question

私は、テキストでオーバーレイされたグラフィックの背景からなるdivを持っています。この要素を水平方向と垂直方向の中央に配置したいと思います。しかし、私はテキストを縦にセンタリングすることはできません。 CSSで

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

：これまでのところ、私は、次のコードを持っている

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

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

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

私は、多くの場合、他の場所で参照さ見てきたテーブルセル/垂直アライン技術はなく、かなりの作業を行います使用します。

Answer 1

H3だから、それは見出しだと仮定しているので、おそらく1行のテキストになります。その場合は、h3のline-heightをコンテナの高さに設定します。

代わりに、それはあなたがこれを行うことができ、段落の場合：

#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) 

}

割合でピクセルを混在させないでくださいを。

Answer 2

試してみてください。

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

はEDIT：また

、あなたの代わりに100％を40ピクセルする#backgroundの高さを設定し、明示的に試みることができます。同じ効果が得られるはずです。