How do I center my banner in my container div?

Question

So I am having trouble centering my banner with the class name "centerbanner" inside its flexed div container class name "centercontainer". I am unsure how to get this to work. Using justify-content / align-itmes on the parent container doesnt seem to do it. If I use margins then when shrinking it gets all wonky. Any ideas?

.centercontainer {
  height: 700px;
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  margin-right: 20px;
  margin-left: 20px;
}

.centerpic {
  border: 1px solid green;
  display: flex;
}

.centerbanner {
  display: flex;
  flex-direction: row;
  height: 80px;
  background-color: red;
  justify-content: center;
  align-items: center;
  font-family: helvetica;
}

<div class="centercontainer">
  <img src="Image" alt="coffee picture" class="centerpic">
  <div class="centerbanner">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
  </div>
</div>