动态地将图像上方和下方的html居中文本

<div class="container">
  <img src="image.jpg" alt="Image">
  <div class="top-text">上方文本</div>
  <div class="bottom-text">下方文本</div>
</div>

.container {
  position: relative;
  text-align: center;
}

.container img {
  display: block;
  margin: 0 auto;
}

.top-text, .bottom-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.top-text {
  top: 0;
}

.bottom-text {
  bottom: 0;
}