Wyrównanie tekstu w pionie

pytanie zadane 3 sierpnia 2016 w HTML i CSS przez alus152 Bywalec (2,690 p.)

Witam, robię sobie pewne portfolio i już na samym początku mam problem - nie mogę wyrównać tekstu w pionie. Jakieś pomysły jak to wyrównać? probowałem przez line-height ale nie zbyt to mi wychodzi.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta name="keywords" content="Portfolio">
	<meta name="author" content="Jan Kowalski">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="My portfolio">
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link href='https://fonts.googleapis.com/css?family=Raleway:300,200,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<title>Jan Kowalski | Portfolio</title>
</head>


<body>

	<div id="container">
		<div id="content">
			<h1>My name is Jan Kowalski </br> I like volleyball &amp; swimming  <h1>
		</div>


	</div>

</body>

</html>

body {
	background-color: #303030;
	margin:0;
	padding:0;
}
#container{
	width:100% !important;
}
h1 {
	color: white;
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	font-size:40px;
	line-height: 300px;
}


#content {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}