css - 如何在 100% 宽度的固定图像中将文本居中

Question

我有一张图片(草坪的图片)，其样式如下:

img{
    width: 100%;
    height: 40%;
    position: fixed; <!-- top of page-->
}

我有一个 <h1> Putnam Lawn Care</h1>我想要重叠并在图像中居中，但不确定如何使用 css 执行此操作(我已经尝试过 position:fixed; top: 20%; left: 50%; 但这会将“Putnam Lawn Care”的“P”设置为 50%，所以这也是不居中)？另外我不确定这里的固定定位是否正确，我应该使用绝对定位吗？在此先感谢您的帮助!

Answer 1

这是动态图像大小和环绕元素。

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  margin: 0;
}
.wrap {
  position: relative;
  float: left;
}

<div class="wrap">
  <h1>Loreum!</h1>
  <img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>