簡単お手軽に真ん中寄せにしたtext-align:center;以外の方法を紹介します。
こちらの方が、一般的に使われています。
凝ったデザインのサイトをつくるのが最終目的地のひとは、使いこなせるように頑張りましょう！
真ん中に配置するために、全部をまとめる
index.htmlをテキストエディタ（サクラエディタ）で開いてください。
サイト名ロゴ、トップ画像、メニュー、著作権表示（フッター）をひとつのグループにまとめます。
その上で、まとめたものをぐぐっと真ん中に寄せていきます。
まとめる。と言えばあの子です。
そう、div
全体＝”zentai”（漢字NGのためローマ字）という名前を付けたdivで、bodyの中身すべてを包み込みました。
ついでに、不要となったｐを削除します。
これで、htmlの記述は終わりです。次にCSSを記述していきます。
（ｐが不要になった理由＝imgタグには効かないtext-align:center;を適用するためにimgタグをｐタグで包んでいました。ですが今回、text-align:center;以外の方法で真ん中寄せにするためｐが不要になった…という事です。）
全体（zentai）を真ん中に配置する
style.cssをテキストエディタ（サクラエディタ）で開いてください。
divで包んだものを真ん中寄せするための記述は、
margin: 0 auto;
です。が、これだけを記述しても真ん中寄せになりません。
後で解説しますが、方法だけ先に書きます。
.zentai {
width: 600px;
margin: 0 auto;
}これを保存して、ブラウザで見ると…
真ん中寄せになりました！
真ん中寄せの解説
まず、marginについて。
「漫画と漫画のすき間をあける」の記事で使った方法です。margin＝すき間（余白）という意味です。
0 auto；＝上下のすき間は0、左右のすき間は自動にしてね。という意味です。
auto＝自動、にすると、左右同じ幅ですき間をつくってくれます。で、結果的に真ん中寄せになる…という事です。
で、ここで問題が。
zentaiくんには、幅の指定がされていません。なので、見える範囲いっぱいにzentaiくんが居る状態です。
で、必要なのが「幅の指定」widthです。
width：600px；＝横幅を600pxにしてね。とお願いすると
このように、600pxのzentaiくんを中心に、左右に同じ幅のすき間が出来ます。結果、真ん中に寄る事になりました。
超超初心者から、初心者へ昇格したら
初心者に昇格したら、margin: 0 auto;ではなく左右だけをautoにして記述する事も選択肢に入れてください。
先に書いたように、0を入れると上下のすき間が0と指定されてしまいます。でも、やりたかった事は「左右のすき間を同じ幅にする事」です。
左右のすき間を同じ幅にする。だけだと、
margin-left: auto; margin-right: auto;
になります。これで、上下のすき間0という余計な指定をせずに済みます。
わたしはまだ不都合を感じたことがないので、margin: 0 auto;を使っていますが、複雑なサイトをつくるときに上下0（不要な指定）をしているとよくないみたいです。
margin-left、margin-rightで記述するデメリットとしては、記述が増えて面倒。ファイルサイズが（微々たるものだけど）重たくなる。です。なので、状況で使い分けてください。
一応、知っとくだけ知っとくと理解が早まります！
コメント