div要素を利用した、ブロックごとセンター揃え

デザイン的にセンター寄せが安易でまとめやすい。

色や、伝える内容によらず、センターにブロック毎寄せられているものは、それだけで、なんとか脱初心者の香りを漂わせる。

div要素を使用して配置する場合

html記述
---------------------------------------------------------------
<div class="container">
    <div class="screen">
        <div class="header"> header </div>
        <div class="main"> main </div>
        <div class="footer> footer </div>
    </div>
</div>
---------------------------------------------------------------
css記述
---------------------------------------------------------------
div.container {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

div.screen {
    width: 800px;<!-- 任意の値 -->
    margin: 0px auto;
    padding: 0px;
}
div.header {
    width: 100%;
    height: 100px; <!-- 任意の値 -->
}

div.main {
    width: 100%;
}

div.footer {
    width: 100%;
    height: 50px;
}

とても多用する手法なので、一応記述。