【CSS】ブロック要素を中央寄せする5つの方法

ブロック要素とインライン要素

ブロック要素

ブロック要素とはその名の通り文や画像をまとめる箱やかたまりのような意味をもちます。Webサイトはこのブロック要素の高さや幅や余白を設定することによって、文字や画像などを好きな位置に配置することができます。

＜代表的なブロック要素＞

div	特に意味を持たない、汎用的なブロック要素
header	ヘッダーコンテンツを作成するためのブロック要素
footer	フッターコンテンツを作成するためのブロック要素
main	メインコンテンツを作成するためのブロック要素
h1〜h6	見出しを作成するためのブロック要素
p	段落を指定するのためのブロック要素
ul・ol・li	リストを作成するためのブロック要素
dl・dt・dd	定義と定義の説明を作るためのブロック要素
table	表を作成するためのブロック要素
hr	水平方向の罫線を作成するためのブロック要素
blockquote	引用・抜粋を表すためのブロック要素

インライン要素

インライン要素はブロック要素と異なり高さや幅や余白を設定することができません。要素の前後で改行が入らないため要素を並べた場合、横並びに文章が続きます。

＜代表的なインライン要素＞

a	リンクの出発点と到達点を指定するためのインライン要素
strong	文字を太字にして強調するためインライン要素
span	特に意味を持たない、囲んだ部分をグループ化するためのインライン要素
mark	文字列をハイライトで表示するためのインライン要素
input	一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタンなどを作成するためのインライン要素
select	セレクトボックスを作成するためのインライン要素
textarea	複数の入力フィールドを作成するためのインライン要素
img(※)	画像を表示するためのインライン要素

※imgタグは特別にイメージ要素とも呼ばれインライン要素だが高さや幅を指定することができます。

配置のルール

ブロック要素とインライン要素の配置にはルールがあります。

＜p＞こんにちは＜mark＞ようこそ＜/mark＞＜/p＞
＜mark＞こんにちは＜p＞ようこそ＜/p＞＜/mark＞

pタグはブロック要素で、markタグはインライン要素です。ブロック要素にはCSSを指定することができますが、インライン要素にはCSSが効きません。そのためインライン要素で囲んだ場合CSSが適用されなくなります。 インライン要素でブロック要素を囲む必要がある場合は、インライン要素に対してdisplay: block; と指定しましょう。こうすることでブロック要素として扱うことができます。

ブロック要素を横センタリング（左右中央寄せ）する方法

・text-align で文章を中央寄せ

pタグで作成した文章を中央寄せする場合にはtext-align: center; を指定します。text-alignは親要素を指定するだけでも子要素に反映されます。親要素を指定することで一気にページの文章を中央寄せにすることも可能です。

・margin でブロック要素を中央寄せ

text-align: center;を指定することによって、文章を中央寄せすることができました。しかし、 text-alignはブロック要素自体の配置を中央にすることはできません。
親要素にtext-align: center;を指定することによって子要素が中央寄せされるようにも考えられますが、ブロック要素にtext-alignは使用することができません。そこで登場するのがmarginプロパティです。marginとは上下左右の空白を指定するためのプロパティです。中央寄せにするためにはmargin-rightとmargin-leftのそれぞれの値をautoにすることで中央寄せできます。

＜HTML＞
＜div class="parent"＞
    ＜p class="child"＞子要素＜/p＞
  ＜/div＞

.child {
  margin-right: auto;
  margin-left: auto;
}

ここで注意することは、親要素を基準に中央寄せされるということです。親要素の幅がページいっぱいになっていない状態であれば、その幅を基準に中央寄せすることになり、子要素は中央からずれてしまいます。

・inline-blockで中央寄せ

display: inline-block; と指定することにより「インライン要素」と「ブロック要素」の中間のような扱いをすることができます。childはブロック要素のためtext-alignで中央寄せすることができませんでしたが、display: inline-block; でインライン要素をもたせることによってtext-align で中央寄せすることができるようになります。つまり、子要素をinline-blockに変えてから、親にtext-align:centerを使えば簡単に中央寄せすることができます。

ブロック要素を縦センタリング（上下中央寄せ）する方法

・position で中央寄せ

上下中央寄せするためには positionを使う方法がおすすめです。
① まず親要素にposition: relative;を指定してブロック要素を固定します。
② 次に子要素にposition: absolute;を指定し、親要素を基準にします。
③ 親要素を基準にした状態でtop: 50%; と指定すると、ちょう真ん中に子要素を配置することができます。

＜HTML＞
＜div class="parent"＞
    ＜p class="child"＞子要素＜/p＞
＜/div＞

＜CSS＞
.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
}

・flexboxで中央寄せ

FlexboxとはFlexible Box Layout Moduleのことで、簡単にレイアウトを組むことができるボックスです。以前からあった技術ですが、ブラウザによって書き方が違っていたり仕様が変わったりしていたためあまり普及していませんでした。ですがこれらの問題が近年改善され、現在注目を集めている技術です。
真ん中に設定するためには、display: flex;を指定します。そしてjustify-content: center;とalign-items: center;の2つを追加で指定すると完了です。とても簡単に中央寄せすることができます。

＜HTML＞
＜div class="parent"＞
    ＜p class="child"＞子要素＜/p＞
＜/div＞

＜CSS＞
.child {
	display: flex;
	justify-content: center;
	align-items: center;
｝

まとめ

いかがだったでしょうか。ブロック要素を中央寄せする方法について少しでもご理解いただければ幸いです。HTMLとCSSに慣れていない方は実際に打ち込んで、ローカル環境などで反映させながら確認してみてください。