CSS - 将标题和文本定位在容器的中心

Question

我有一个容器，背景图片，h1标题和需要中心的文本行。目前，我已将文本置于中心位置，但它紧紧抓住图像/容器的顶部。我已经在网站的另一部分做了这个，只有一个标题和它精致的死亡中心。我似乎无法获得h1和p来做同样的事情。这是相关代码：

＆＃13;

＆＃13;

section#about {
  height: 400px;
  width: 100%;
  background: url(../images/homepagemain.jpg) center center no-repeat;
  background-size: 100%;
  background-position: center;
  position: relative;
}

#about div.text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

＆＃13;

<section id="about">
  <div class="container">
    <a href="index.html">WANT TO WORK FOR US?</a>
    <div class="text">
      <h1>MAIN HEADLINE</h1>
      <p>INSERT A TAGLINE HERE</p>
    </div>
  </div>

  <!-- some other code -->
</section>

＆＃13;

＆＃13;

＆＃13;

任何帮助表示感谢。

更新

这是完整容器的代码：

＆＃13;

＆＃13;

section#about {
  height: 400px;
  width: 100%;
  background: url(../images/homepagemain.jpg) center center no-repeat;
  background-size: 100%;
  background-position: center;
  position: relative;
}

#about a {
  text-decoration: none;
  color: #FFFFFF;
  /*   position: static; */
  float: right;
  background-color: #000000;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  white-space: nowrap;
}

#about div.text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.showreel {
  height: 50px;
  width: 100%;
  padding: 0px;
  position: absolute;
  background-color: black;
  bottom: 0;
  justify-content: space-between;
}

.showreel,
.showreel>div {
  display: flex;
  align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore i {
  margin-right: 30px;
}

.seeour i {
  margin-left: 30px;
}

＆＃13;

<section id="about">
  <div class="container">
    <a href="index.html">WANT TO WORK FOR US?</a>
    <div class="text">
      <h1>MAIN HEADLINE</h1>
      <p>INSERT A TAGLINE HERE</p>
    </div>
  </div>
  <div class="container showreel">
    <div class="seemore">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
        <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
      </span>
      <p>SEE MORE</p>
    </div>
    <div class="seeour">
      <p>SEE OUR SHOWREEL</p>
      <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
    </div>
  </div>

</section>

＆＃13;

＆＃13;

＆＃13;