html - 图像中间居中文本

Question

我正在尝试弄清楚如何在图像中间正确放置文本。我设法让它居中，但只是在图像的最顶部，而不是死在中间。

#ImageMain {
  background-image: url(C:/Users/Gabriel/Downloads/bg.jpg);
  width: 80%;
  height: 700px;
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
  opacity: 0.8;
}

#TextMain h1 {
  font-size: 100px;
  font-family: "PT Sans", sans-serif;
}

<div id="ImageMain">
  <div id="TextMain">

    <h1>Shop our Whole Selection</h1>

  </div>
</div>

Answer 1

将文本包裹在div block 中

 <div name="text_main"><p>text</p></div>


  //apply css properties...
 //adjust position by applying margin-top and margin-bottom
 // then position the element by
  float:center //and try to make positon:fixed