Home centralizada

<!DOCTYPE html>
<html>
<head>
<title>Gabriel Sardinha</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="description" content="Meu site pessoal">
<meta name="keywords" content="gabriel, sardinha, gsardinha, anjosarda">
<meta name="reply-to" content="gabriel@gsardinha.net">
</head>
<body>
<div id="page">
<div id="box1">
	<ul id="nav">
		<li><a href="http://www.facebook.com/anjosarda">Facebook</a></li>
		<li><a href="https://www.youtube.com/channel/UCI03a6Hta0CUqR4cX-oVJfQ">YouTube</a></li>
		<li><a href="http://gsardinha.net/photos/">Photos</a></li>
		<li><a href="https://twitter.com/anjosarda">Twitter</a></li>
		<li><a href="http://gsardinha.net/9gag/">9gag Traduzido</a></li>
	</ul>
</div>

<div id="main">

<iframe width="400" height="250" src="https://www.youtube.com/embed/mEV20Iod974" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<span style="position:absolute;bottom:0;right:15px;">gabriel@gsardinha.net</span>
</div><!-- end of main -->
</div><!-- end of page -->
</body>
</html>

Em funcionamento aqui.

CSS da pagina:

body {
	color: #666;
	background-color: #666;
	font-family: Verdana;
	font-size: 18px;
	width: 500px;
}

#page {
	background-color: #fff;
	visibility: visible;
	margin: auto;
	position: absolute;
	width: 700px;
	height: 400px;
	left:50%;
	top:50%;
	margin-left:-350px;
	margin-top:-200px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

border: 2px solid white;


-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;

-webkit-box-shadow: 0 -1px 2px #292929;
}

	
#box1 {
	background-color: #fff;
	position: absolute;
	top: 50px;
	left: 25px;
	width: 150px;
	height: 200px;
	border-right:2px solid #666;
}

#main {
	position: absolute;
	top: 50px;
	left: 250px;
	width: 400px;
	height: 300px;
}

/* inicio do CSS do Menu */
ul {
text-align: left;
margin: 0;
padding: 0;
list-style: none;
width: 120px;
border-bottom: 1px solid #fff;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 119px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #666;
background: #fff;
padding: 5px;
border: 1px solid #fff;
border-bottom: 0;
}
/* correcao \*/
* html ul li {float: left;}
* html ul li a {height: 1%;}
/* fim da correcao */


ul li a:hover {
color:#666;
background: #fff;
border-left: 4px solid #666;
padding-left: 15px;
}

li:hover ul ul, li.over ul ul {display:none;}
li:hover ul, li li:hover ul, li.over ul,
li li.over ul {display: block;} /* regra magica */

/* final do CSS do Menu */