css - 在图像上水平和垂直响应地居中文本

Question

这个问题已经在这里问过好几次了，但我还没有找到答案。

我想将一段文本(只有几个词)置于图像的水平和垂直中心。

图像应该是 img 标签而不是背景图像。

文本应该通过调整浏览器窗口的大小来响应地 self 调整。(我的元素中有 bootstrap)

an screenshot of desired layout

Answer 1

来了^^

div {
  position: relative;
  width: 50%;
}
img {
  width: 100%;
}
p {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  margin: 0;
}

<div>
  <p>ON SALE</p>
  <img src="https://upload.wikimedia.org/wikipedia/en/c/c4/Original_Image_before_ASTC_compression.jpg">
</div>