文本包裝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%); 
}