How to centre div vertically and horizontally inside another div when using display: flex?

Question

I'm using 'display: flex' to make 2x divs the same height and I'm having trouble keeping the larger divs contents completely centred vertically and horizontally, can anyone please help? It's been driving me crazy!

Thank you in advance

SOLVED

Added the following to the container hire-range-single-rt and it worked a dream:

display: flex; align-items: center; justify-content: center;

JSFiddle

.hire-range-cat-container {
  text-align: center;
}

.hire-range-banner h1 {
 margin-bottom: 30px;
}

.hire-range-banner p, .hire-range-banner-large p, .hire-range-banner-small p {
 font-size: 16px;
 font-weight: 300;
 color: black;
 margin: 0;
}

#hire-range-single-rt {
 background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Refrigerated-Trailer-Background.jpg);
}

#hire-range-double-co {
 background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Cooling-Background.jpg);
 width: 70%;
 margin-right: 50px;
}

#hire-range-double-he {
 background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/Heating-Background.jpg);
 width: 30%;
}

#hire-range-single-rt, #hire-range-double-co, #hire-range-double-he {
 background-size: cover;
 padding: 6%;
 display: inline-block;
}

.same-height-boxes {
 display: flex;
 flex: 1;
 margin-top: 50px;
}

.three-usp-cont {
 margin-bottom: 30px;
}

.single-usp-cont {
 display: inline-block;
 margin-left: 10px;
 margin-right: 10px;
}
.three-usp {
 display: table;
 margin: 0 auto;
}

#single-usp { 
 width: 100px; 
 height: 100px; 
 text-align: center; 
 background-image: url(http://reactivecm.com/wp-content/uploads/2017/04/reACTIVECM-Temperature-Control-Roundel.png);
 background-size: cover;
 display: table-cell;
  vertical-align: middle;
}

#single-usp p {
 color: white;
}

.hire-range-banner button, .hire-range-banner-large button, .hire-range-banner-small button {
 margin-top: 30px;
}

<div class="hire-range-cat-container"> 
 <div id="hire-range-single-rt"> 
  <div class="hire-range-banner"> 
   <h1>Refrigerated Trailers</h1> 
   <div class="three-usp-cont">
   <div class="single-usp-cont">
    <div id="single-usp">
     <p>USP 1</p>
    </div>
    </div>
    <div class="single-usp-cont">
    <div id="single-usp">
     <p>USP 2</p>
    </div>
    </div>
    <div class="single-usp-cont">
    <div id="single-usp">
     <p>USP 2</p>
    </div>
    </div>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
   <button><a href="">Find out more</a></button>
  </div>
 </div>
 <div class="same-height-boxes">
 <div id="hire-range-double-co">
  <div class="hire-range-banner-large">
   <h1>Cooling</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
   <button><a href="">Find out more</a></button>
  </div>
 </div>
 <div id="hire-range-double-he">
  <div class="hire-range-banner-small">
   <h1>Heating</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcper</p>
   <button><a href="">Find out more</a></button>
  </div>
 </div>
 </div>
  </div>