Non ho tempo per verificare col tuo codice, ma centrando verticalmente con la tecnica del display table, ottengo il risultato che puoi vedere provando e incollando il codice:



codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">
<!--
* {margin:0;padding:0}
html,body{height:100%;width:100%;}

body {
background-color: #cccccc;
text-align:center;
min-height:250px;
min-width:800px; /* larghezza footer */
position:relative;
}
#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
width:800px;
height: 250px;
margin:0 auto;
}
#inner {
width: 400px;
height: 200px;
margin-left:auto;
margin-right:auto;
background:yellow;
padding-top:25px;
padding-bottom:25px;
}
#footer {
width:100%;
height: 20px;
border-top: 1px solid #ccc ;
padding-top: 4px;
font-family:"Arial";
font-size: 11px;
color: #669999;
position: absolute;
bottom:0;
left:0;
background:red;
}
-->
</style>

<!--[if lt IE 8]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>

<body>
<div id="outer">
<div id="container">
<div id="inner">
<h1 style="height:200px;background:pink">Contenuti formattati solo ai fini della visualizzazione</h1>
</div>

</div>
</div>
<div id="footer"></div>
</body>
</html>
ho assegnato una altezza di 250 pixel calcolando che il footer fra altezza padding e bordo è alto 25px