<div class="banner">
	<div class="banner-container">
		<div class="banner-text">
		<h1>Lorem ipsum dolor sit amet.</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam hic repellat blanditiis.</p>
			<p>
				expedita at quo ipsa inventore nulla minus sunt amet quis maxime, ducimus, quam eum. Explicabo ratione delectus repellendus?
			</p>
	</div>
	</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

* {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

.banner-text {
	text-align: center;
	width: 60%;
	margin: 0 auto;
}

.banner-text h1 {
	font-weight: 800;
	font-size: 50px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.banner-text p {
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
}

.banner:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	z-index: -1;
}

/*** 
display: table & table-cell start here 
***/
.banner {
	width: 100%;
	height: 600px;
	background: url(http://demo.gwdesign.org/bracket/img/slider/03.jpg) no-repeat center center fixed;
	background-size: cover;
	position: relative;
	z-index: 1;
	
/* 	this is display: table; */
	display: table;
}

.banner-container {
	color: #fff;
	
	/* 	
	this is 
	display: table-cell; and
	vertical-align: middle;
	*/
	display: table-cell;
	vertical-align: middle;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.