CSSについて 入力フォームの上下揃い

質問

CSSについて 入力フォームの上下揃い

sample.css

@CHARSET "windows-31j";
html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%}

html {
height:100%;
}

body {
height:100%;
}

body > #container {
height: auto;
z-index:0;
}

#container{
width:780px;
margin-top:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
position:relative;
min-height:100%;
border:1px solid #999;
}

#header{
margin: 0;
padding: 0px 0px 0px 0px;
width: 100%;
height: 100px;
background-color:#4682B4;
z-index:1;
}

#main{
padding:auto;
width:100%;
backgruond-color:#87CEEB;
z-index:1;
}

#footer{
position:absolute;
bottom:0px;
width: 100%;
height: 100px;
background-color:#4682B4;
z-index:1;
}

index.html

<div id="container">

<div id="header"></div>

<div id="main">
<div class="vartical-align">
<form action="">
<input type="text" name="id">
<input type="password" name="pas">
</form>
</div>
</div>

<div id="footer"></div>

</div>

上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが
どうした良いでしょう？

回答No.1

藤田 朋郎（@hujitomo）

table に逃げちゃ駄目ですか？

html,body,div,span,h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
font-size:100%
}

html,body {
height:100%;
}
#container {
position: relative;
width: 780px;
height: 100%;
margin: 0 auto;
border: 1px solid #999;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: #4682B4;
}
#main {
position:absolute;
top: 0;
width: 780px;
height: 100%;
}
#main td {
vertical-align: middle;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #4682B4;
}

<div id="container">

<table id="main">
<tr>
<td>
<input type="text" name="id">
<input type="password" name="pas">
</td>
</tr>
</table>

<div id="header"></div>
<div id="footer"></div>

</div>

div のまま display: table-cell; とか使ってやってみたけどなんかうまくできなかった…
javascript でブラウザの高さを求めれば希望の表示を実現可能ですが、それな面倒くさい事するくらいならおとなしく table 使ったほうがユーザビリティに優れていると思ったのでこんな形に。
頭良い人がもっと素敵なコード書いてくれるのに期待。