当使用display：flex时，如何在另一个div内垂直和水平居中div？

Question

我正在使用＆＃39; display：flex＆＃39;为了使2x div具有相同的高度，我无法保持较大的div内容完全垂直和水平居中，有人可以帮忙吗？它让我发疯了！

提前谢谢

解决

将以下内容添加到容器hire-range-single-rt中，它实现了梦想：

  

显示：flex; align-items：center;辩解内容：中心;

JSFiddle

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;