How can I make the text inside the div stay in the center of the div?

Question

I am trying to add a height to my div tags, but when I do, the text stays up at the top of the box. How can I make the text be centered in the middle of the div at any height size?

Thank you!

#services .services {
  background: #e7e7e7;
  padding: 10px;
  text-align: center;
  width: 100%;
  border: solid 1px red;
}

#services .box {
  border: solid 1px red;
  background: #ccc;
  /* display: inline-block; */
  padding: 10px;
  margin: 10px;
  height: 100px;
  /* vertical-align: middle; */
}

<section id="services">
  <div class="services">
    <h1 class="section-title">Serv<span class="red">i</span>ces</h1>
    <div class="box box1">
      <h2>test</h2>
    </div>
    <div class="box box1">
      <h2>test</h2>
    </div>
  </div>
</section>

I have tried every tag the I can think of that involves center or middle.