画面中央にレイアウト（覚え書き）

　各ユーザーによって当然ことなるサイズのブラウザのサイズの中央部分に文字列などを配置するのに、以前は
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
上下中央部の文字列
</td>
</tr>
</table>
と、強引な記述を使ったが、CSSできちんとかけることが分かった。

●XHTMLソース
<div id="container">
<h1>サイトタイトル</h1>
<p>Description</p>
</div>
●CSSソース
* {
margin: 0;
padding: 0;
}
div#container {
position: absolute;
top: 50%;
left: 50%;
overflow: auto;
width: 580px;
height: 280px;
margin-top: -150px;
margin-left: -300px;
padding: 10px;
border: 1px solid #999;
}

http://web-100.jp/sample/058.shtmlより

要するに、cssに
top: 50%;
left: 50%;
という記述を使うのが鍵だということだ。