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