<div class=”wrapper”>を基準に上下左右を中央寄せにします。
どちらもレスポンシブ対応ですが、コンテンツの横幅が違います。

position:absoluteを使う

DEMO

上下左右中央のコンテンツ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<div class="wrapper">
	<div class="box1">
		<h2>上下左右中央のコンテンツ</h2>
		<p>
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
		</p>
	</div>
</div>

CSS

.wrapper {
	height: 100vh;
	position: relative;
}
.box1 {
	background: #eee;
	left: 50%;
	padding: 20px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

flexboxを使う

DEMO

上下左右中央のコンテンツ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<div class="wrapper">
	<div class="box2">
		<div class="box2-inner">
		<h2>上下左右中央のコンテンツ</h2>
		<p>
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
		</p>
		</div>
	</div>
</div>

CSS

.wrapper {
	height: 100vh;
	position: relative;
}
.box2 {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
}
.box2-inner {
	background: #eee;
	box-sizing: border-box;
	padding: 20px;
}