テキストラップdiv内の絶対配置されたテキストの幅と高さが折り返しの100％で固まっています

Question

相対テキストの折り返しの内側に絶対配置のテキストがあり、問題は、幅と高さが自動的にコンテナを塗りつぶすため、テキストが中央にならないことです。テキストを縦と横の両方でdivの中央に配置するにはどうすればよいですか？絶対的な要素のための

JSFiddle

HTML

<div class="text-wrap"> 
    <h3>Hello</h3> 
</div> 

CSS

.text-wrap { 
    height: 200px; 
    width: 120px; 
    position: relative; 
    border: 1px solid black; 
} 

.text-wrap h3 { 
    position: absolute; 
    margin: auto; 
    left:0; 
    right:0; 
    top:0; 
    bottom: 0; 
} 

Answer 1

変更CSSルール、それを中心に、以下のように（コンテナの中央にその左上隅に移動その後、それを元に戻し、自身の幅/高さの半分だけ左に移動させて、それを中心にします）

.text-wrap { 
 
    height: 200px; 
 
    width: 120px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 

 
.text-wrap h3 { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    
 
}

<div class="text-wrap"> 
 
    <h3>Hello</h3> 
 
</div>

Answer 2

、この作品オーケーありがとうをこの

.text-wrap { 
    height: 200px; 
    width: 120px; 
    position: relative; 
    border: 1px solid black; 
} 

.text-wrap h3 { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}