在Flexbox的项目中居中放置文本

Question

我是一个连续放置的flexbox，居中位置使divwords1和div1image彼此相邻。问题在于文本已移到上方，但实际文本本身并未居中。有什么想法吗？

https://codepen.io/CaptainMattyP/pen/oNXWxWG

      <div id="div1">
        <div id="divwords1">
          <h1>Let the Terror<br>commence!</h1>
          <p>Building on the overwhelming 
            success of our acclaimed Dark Terror<br>
            and Dual Dark amps, we’ve distilled<br>
            thousands of customer demands into<br>
            a pint-sized valve hybrid head –<br>
            the Micro Dark.
          </p>
          <a href="_target"><p id="buybutton">  Buy  </p></a>
        </div>
        <section>
          <img class="div1img" src="https://www.thomann.de/pics/bdb/369213/10582053_800.jpg" >
        </section>
      </div>

#div1 {
  background-color: white;
  height: 420px;  
  display: flex;
  flex-direction: row; 
  justify-content: center;
  padding-left: 350px; 
}

#divwords1 {
  width: 20%; 
  padding-top: 60px;
  white-space: nowrap;
  text-align: center; 
  margin-right: 20px; 
}

.div1img {
  height: 80%; 
  float: center; 
  padding-top: 70px;
  padding-right: 70px; 
  margin-left: 100px; 
}

  flex-basis: auto;
}