自动调整高度并垂直居中容器中的中心Div

Question

我有一个div容器，它位于容器中间。我能够将它调整到一张幻灯片，但是我遇到的问题是我使用相同的css文件制作了几个.html文件，并且高度不是我所期望的。我希望无论高度大小如何，容器的高度都会自动环绕内容，但不会忽略给予内容容器的边距，填充等。

下面是我的代码和我现在输出的图像。

.template-benefits{
	width: 100%;
	padding-bottom: 50px;
	position: relative;
}
.tbenefitswrpr {
	width: 1000px;
	margin: auto;
	height: 400px;
	padding: 50px 0 0 0 ;
}
.template-benefits h3{
	font-weight: normal;
	font-size: 1.3em;
	color: rgb(150,150,150);
}
.template-benefits ul li{
	list-style-type: disc;
}

.tbenefitswrpr h1{
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	margin-bottom: 30px;
}
.tbenefitswrpr ul{
	padding: 0px 0px 0px 20px;
}
.tbenefitswrpr li{
	padding-bottom: 20px;
	font-size: 1.2em;
	font-weight: bold;
}

<div class="template-benefits">
	<div class="tbenefitswrpr">
	<div class="tbenefits-left">
		<h1>Preventative maintenance of equipment and assets</h1>
		<ul>
			<li>Schedule recurring work orders for routine preventative maintenance for anything from computers, technology, and other appliances or equipment</li>
			<li>Easily view schedule of past completed maintenance work orders</li>
			<li>Custom dashboards to track preventative maintenance</li>
		</ul>
	</div>	
	<div class="tbenefits-right">
		<h1>Building and facility management</h1>
		<ul>
			<li>Manage multiple facilities all in one organized place</li>
			<li>Easily view past completed security and safety inspections</li>
			<li>Assign and coordinate work orders for repairs for utilities, plumbing, and broken appliances</li>
		</ul>
	</div>	
	</div>
</div>

Wanted Output

Answer 1

试试这个.tbenefits-left{float: left;width: 50%;margin-right: 20px;}

Answer 2

像这样？

$request = app('Illuminate\Http\Request');

.template-benefits{
	width: 100%;
	padding-bottom: 50px;
	position: relative;
}
.tbenefitswrpr {
	width: 1000px;
	margin: auto;
	height: 400px;
	padding: 50px 0 0 0 ;
}
.template-benefits h3{
	font-weight: normal;
	font-size: 1.3em;
	color: rgb(150,150,150);
}
.template-benefits ul li{
	list-style-type: disc;
}

.tbenefitswrpr h1{
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	margin-bottom: 30px;
}
.tbenefitswrpr ul{
	padding: 0px 0px 0px 20px;
}
.tbenefitswrpr li{
	padding-bottom: 20px;
	font-size: 1.2em;
	font-weight: bold;
}

/*---update---*/
.tbenefits-left{
    float: left;
    width: 50%;
    margin-right: 20px;
 }