javascript - 动态图像中的居中文本

Question

我有一个动态图像:100% 宽度和 100% 高度，无论大小如何，如何使文本在垂直和水平方向居中？

https://jsfiddle.net/jzhang172/h9y8umr2/

html, body{
  margin:0px;

}
.wrapper{
position:relative;
}
img{
  height:100%;
  width:100%;
  position:relative;
}
.text-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25%;
  margin-top:-25%;
}

<div class="wrapper">
<img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
<div class="text-wrapper">

<h2>Sample Text</h2>
<p>Text Sample</p>

</div>
</div>

Answer 1

我认为您需要使用 transform: translate() 将文本居中。顺便说一句，最好使用CSS Flexboxes - fiddle here :)

html, body{
  margin:0px;

}
.wrapper{
position:relative;
}
img{
  height:100%;
  width:100%;
  position:relative;
}
.text-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="wrapper">
<img src="http://www.wildlifetrusts.org/sites/default/files/images/Planting%20along%20realigned%20River%20Chelt%20Gloucs%20WT,%20EA%20and%20landowner2%20comp.jpg">
<div class="text-wrapper">

<h2>Sample Text</h2>
<p>Text Sample</p>

</div>
</div>