文本换行div中的绝对定位文本的宽度和高度停留在换行的100％

Question

I have absolute positioned text inside a relative text wrap and I want it to vertically and horizontally center. The issue is, the text won't center because it's width and height automatically fill the container. How do I fix this so the text can be centered in the div, both vertically and horizontally?

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

Change the CSS rule for the absolute element as follows to center it (moves its upper left corner to the center of the container, then moves it back up and left by half of its own width/height, thereby centering it)

 .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

Try this

.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%);
}