nd3w/horizontal-vertical-center.html

## horizontal-vertical-center.html
<!DOCTYPE html>
<html>
	<head>
		<title>The Center </title>

		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
		<style>
			html, body {
				height: 100%;
			}
			body, button, input {
				font-family: 'Open Sans', sans-serif;
			}
			body {
				font-size: 0.875rem;
				color: #676a6c;
				line-height: 1.75rem;
				padding: 0 1.25rem;
				margin: 0;
			}
			#grey-box{
				background: #e4e4e4;
				max-width: 570px;
				margin: auto;
				padding: 1.25rem;
				border-radius: 5px;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
			.content {
				background: #f7f7f7;
				padding: 1.25rem;
				border-radius: 5px;
			}

		</style>
	</head>
	<body>
	<div id="grey-box">
		<div class="content">
			This div horizontally and vertically center
		</div>
	</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Center </title>

	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
	<style>
	html, body {
	height: 100%;
	}
	body, button, input {
	font-family: 'Open Sans', sans-serif;
	}
	body {
	font-size: 0.875rem;
	color: #676a6c;
	line-height: 1.75rem;
	padding: 0 1.25rem;
	margin: 0;
	}
	#grey-box{
	background: #e4e4e4;
	max-width: 570px;
	margin: auto;
	padding: 1.25rem;
	border-radius: 5px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	}
	.content {
	background: #f7f7f7;
	padding: 1.25rem;
	border-radius: 5px;
	}

	</style>
	</head>
	<body>
	<div id="grey-box">
	<div class="content">
	This div horizontally and vertically center
	</div>
	</div>
	</body>
	</html>