看来我已经想明白了我开始打乱一些价值观，我得到了它。
HTML：

<div id="main-div">
    <img id="image" src="url.com/image.png">
    <h1 id="text">Caption</h1>
</div>

CSS：

#main-div {
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0px auto;
  transform: translate(-50%, 0);
}

#image {
  position: absolute;
  top: 130px;
  left: 50%;
  margin: 0px auto;
  transform: translate(-50%, 0);
  color: white;
  font-family: "Roboto";
  text-align: center;
}

#text {
  position: absolute;
  top: 30px;
  left: 15%;
  margin: 0px auto;
  transform: translate(-50%, 0);
  display: block;
  border: thin red solid;
}

下面是一个JS Fiddle的代码和最终结果：https://jsfiddle.net/k3b70Lg7/

不可以，因为图像元素被替换。
但是，您可以将图像和文本元素 Package 在另一个div中并定位它。

<div class="outer-black">
   <div class="inner-image-text-wrapper">
       <img src="..">
       <div class="text"></div>
   </div>
</div>

现在，将 Package 器设置为inline-text意味着它将根据内容（* 图像 ）进行扩展，并且通过将其设置为position:relative，您可以将文本（position:absolute *）放置在其中的任何位置。
完整示例

.outer-black {
  background: black;
  padding: 2em;
}
.inner-image-text-wrapper{
  position:relative;
  display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
  position:absolute;
  top:105%;
  left:5%;
  right:5%;
  text-align:center;
  background:rgba(255,255,255,0.5);
}

<div class="outer-black">
  <div class="inner-image-text-wrapper">
    <img src="http://lorempicsum.com/simpsons/300/200/1">
    <div class="text">image caption</div>
  </div>
</div>