我的div部分位于我的标题div

Question

我有三个主要部分到我练习的网站：导航，标题和部分。 我的标题栏包含一个中间有一些文字的图像，我花了很长时间试图找到如何让图像接受它上面的文本，然后让它直接进入中心（垂直和水平） img。

我发现了一些有用的东西，但在找到解决方案之后，我的部门决定继续使用图像，我确定这是因为图像上的position: absolute;。

我需要的帮助;如何将标题放在标题下方，并将文本保留在图像顶部并位于图像的中心？

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}
body {
  margin: 0px;
  padding: 0px;
  background-color: #f2f2f2;
}
html {
  margin: 0px;
  padding: 0px;
}
#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: "Open Sans", arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
nav {
  margin-bottom: 0;
}
header {
  margin-top: 0;
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  text-align: center;
  display: table;
  font-family: arial;
  font-size: 18px;
  color: orange;
}
h1 {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  display: table-cell;
}
#bannerImage {
  height: 500px;
  width: 100%;
  position: absolute;
  z-index: -1;
}
section {
  background-color: white;
  font-family: arial;
  width: 100%;
  border: 1px solid #e7e7e7;
  text-align: center;
}

＆＃13;

<nav>

  <ul>
    <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
    <li><a href="Game1.html" id="myBtn" onclick="disableLink()">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>

<header>
  <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
  <h1>Codewarts</h1> 
</header>

<section>
  <h2>Welcome!</h2>
  <div id="content">
    <p>Do you have a name?.....Great!</p>
    <p>Insert it in the box below!</p>


  </div>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想这样晒太阳吗？

    header {
    position: relative;
    }
    header h1 { 
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50% )}