コンテンツ全体などブロック要素を横中央（センター）に配置するCSS
コンテンツ全体を横中央に配置するには、htmlのbodyより下の要素を全てdivタグでくくって、 そのdivにwidthで幅を指定して、更にmargin:0 autoを指定します。
margin: 0(上下) auto(左右);という意味なので、コンテンツ全体の左右にmarginをautoで指定すれば中央に配置されるということです。
marginの上下に0を指定しているのは、0を指定しないと少し隙間が出来てしまうからです。
ページ全体を横中央に配置するCSS
- htmlのbodyより下の要素全てをdivタグでくくる
- そのdivにwidthで幅を指定する
- 更にmargin:0 auto;を指定する
と、とても簡単に出来るんですが、コンテンツ全体だけでなく、コンテンツの中の更に内側のコンテンツや、tableタグやulタグなどもwidthを指定してmarginの左右にautoを指定すれば横幅中央に配置されます。
そして、これらは全てブロック要素です。
- ブロック要素とは
-
htmlの要素は、ブロック要素とインライン要素に分類することができます。
ブロック要素は、ページを構成する上でのひとつの塊のことで、divやh1などの見出しタグやpタグ、ulタグやulの中のliタグなどもブロック要素です。
対してインライン要素とは、主に文章の一部として扱われるようなもののことで、aタグやspanタグ、strongタグなどです。
ブロック要素を横中央に配置するCSS
- ブロック要素にwidthで幅を指定する
- 更に、左右のmarginにautoを指定する
もしかしたらtext-align:center;を指定して上手くいなかくて、検索されてここに辿り着いた方もいるかもしれません。
text-alignは文章などのインライン要素に効くCSSなんです。
その外側のブロック要素は、marginの左右にautoでないとセンターに配置されません。
以下は過去記事の続編になります。
以前、『vertical-alignが効かない時の対処法』って記事を書いたんですが、縦中央に配置できたけど、更に横中央にも配置したいって声をいただいたので書いてみました。
テキストを縦横中央に配置する方法
以前の記事『vertical-alignが効かない時の対処法（テキストを縦中央揃えにするには）』の続編になりますが、テキストを縦中央揃えにした後、更に横中央に配置する方法です。
テキストを縦中央揃えにする方法は、以下からご覧ください。
テキストが1行の場合
下は、高さ100pxのボックス内にテキストを縦横中央に配置した例です。
See the Pen yrYOxz by natsuki (@natsukimemo) on CodePen.
この場合、text-align:center;が使えます。
※cssの3行目と4行目は、テキストを縦中央に配置するために記述しています。
pタグなどのブロック要素では、vertical-align:middle;が効かないので、テキストが1行の場合、heightとline-heightに同じ値を指定すると縦中央に配置できます。
複数行の場合
複数行のテキストを縦中央・横中央に配置する方法です。
htmlは、pタグをdivの入れ子にします。
divはブロック要素なので、cssではdivの左右にmarginでautoを指定します。
※cssでpositionを使っていますが、テキストを縦中央揃えにするためです。この記事の主旨と逸れるので説明は割愛します。
See the Pen zXvqyL by natsuki (@natsukimemo) on CodePen.
divタグであるブロック要素を横中央に配置させるので、widthを指定して（cssの5行目）、左右のmarginにauto（cssの6行目）を指定します。
positionを指定していることや、cssの11～13行目は、テキストを縦中央にするためのcssです。
関連情報
先ほどちょっとtext-align:centerについてふれましたが、『text-align:centerが効かない！text-alignは何に効くCSSか – なつきメモ』って記事も書きましたので、よろしければ読んでみてください。
