中央に表示させたい

質問

こういうHPを作りたいのですがどうしたらいいですか？
○常にブラウザの中心に表示される。
○縦の比率が15％、60％、25％の3段構造に
○イメージ的にはhttp://www.sonymusic.co.jp/Music/Info/yui-net/information/index.htmlに似てる

イメージ↓
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
|○○○-Mozilla Firefox　　　　　　　　　　　　　　　　　　　　　　　　＿　□　×|
|－－－－－－－－－－－－－－－－－－－－－－－－－－－－－|
|　　　　　　　　　　　　　　　ブラウザ内の余白　　　　　　　　　　　　　　　　　　 |
|　　　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　　　|
|　　　|＿＿＿＿＿＿＿＿＿＿＿15％＿＿＿＿＿＿＿＿＿＿＿＿|　　 |
|　　　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|　　　　　　　　　　　　　　　　60％　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|　　　|
|　　　|　　　　　　　　　　　　　　　　25％　　　　　　　　　　　　　　　　　　　　|　　　|
|　　　|＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|　　　|
|　　　　　　　　　　　　　　　　　　　　余白　　　　　　　　　　　　　　　　　　　　　　|
|＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿_|

お願いします。

回答No.2

Seravy

テーブルは別に悪くはないのですが、使いやすさと最近のながれではこっちが推奨されているのでブロックを使いました。
（ソースをチェックしてみたのですが、確かにその参考サイトではテーブルを使ってますね）

固定の場合は、メインブロックの%指定していた所をピクセル(px)で指定します。ただ、指定サイトのように上下も左右からも真ん中に浮かせる、というアイディアは浮かびません；（ブロックはテーブルのように要素の真ん中に子要素を配置する機能がないからです）
となると、余白とメインブロックの高さを固定値にして、

<div style="margin:auto;height:100%;width:720px;border:1px solid black">
<div style="height:80px;border:1px solid black"></div>
<div style="height:560px;border:1px solid black">
<div style="height:15%;border:1px solid black"></div>
<div style="height:60%;border:1px solid black"></div>
<div style="height:25%;border:1px solid black"></div>
</div>
<div style="height:80px;border:1px solid black"></div>
</div>

と、してみてはどうでしょう。

回答No.1

Seravy

つねに真ん中に表示するには、
全体をくるんだブロック要素のCSSで、
margin:auto;
を指定してやると中身が真ん中に表示されるようになります。
<center>タグを使うよりはスマートですね。

%指定ですか・・参考にされたサイトは比率は固定ですが、可変でもいい、という事ですね。（当然リサイズされたりこのPCのように縦1050pxだと伸びる）

それなら、ブロック構造としては、

全体ブロック
　余白
　メインブロック
　　ヘッダ
　　コンテンツ
　　フッタ
　余白

のような感じの構造で良いんじゃないかなぁと。
メインブロックで高さを指定すれば、中の3つのブロックの100%はメインブロックの高さになりますので、ご希望のような15%、60%と分割が可能です。

試しに検証してみたソース。（CSS分離はしてないです；）

<div style="margin:auto;height:100%;width:720px;border:1px solid black">
<div style="height:10%;border:1px solid black"></div>
<div style="height:80%;border:1px solid black">
<div style="height:15%;border:1px solid black"></div>
<div style="height:60%;border:1px solid black"></div>
<div style="height:25%;border:1px solid black"></div>
</div>
<div style="height:10%;border:1px solid black"></div>
</div>

補足

ご回答ありがとうございます。
初心者なんで詳しく教えていただきたいです。
ちなみに今まではテーブルタグを使用していました。
あと、ついでに固定した場合も教えていただけますか？
よろしくお願いします。