html - 将图像内的元素垂直居中

Question

我知道有很多方法可以将一个 div 垂直居中于另一个 div 内，但我遇到的问题是如何将一个 div 垂直居中于图像元素内。

这是我需要的最少代码:

HTML:

<img class="star" src="star.png"></img>

<div class="vCenter">Text to be vertically centered in the image.</div>

CSS:

.star {
    position: absolute; /* I need this value for another thing in my project */
}

此外，图像的高度以百分比表示。

Answer 1

1. 将图像包裹在另一个元素中
2. 将 position:absolute 移动到包装元素
3. 将文本置于包装元素居中，让图像展开包装元素

.wrapper {
  position: absolute;
  top: 30px;
  left: 10px;
  
  display: flex;
  justify-contents: center;
  align-items: center;
}

.wrapper img {
  /* debug */
  background: yellow;
  width: 300px;
  height: 300px;
}

.wrapper .vCenter {
  position: absolute;
  left:50%;
  max-width: 100%;
  transform: translateX(-50%);
}

<div class="wrapper">
  <img class="star" src="star.png" />

  <div class="vCenter">Text to be vertically centered in the image.</div>
</div>