【図解多め】HTML要素を自在に配置！CSSで上下・左右中央揃えする方法5選 | CSS入門
はじめに
CSSでの要素配置がうまくいかずに発狂した数はいざ知らず。こんにちは、地方産限界エンジニアのガラシです。
今回はフロントを触るタスクに着手している時に度々出くわしてはその都度不毛な検索を行なっている、HTML要素の中央揃えの方法について、図解とサンプル多めでまとめていきたいと思います。
この記事を読んでわかることは以下の通りです。
- text-alignプロパティを使ってインライン要素を横中央揃えする方法がわかる
- marginプロパティを使ってブロック要素を横中央揃えする方法がわかる
- positionプロパティを使って要素を縦横中央揃えする方法がわかる
- Flexboxを使って要素を縦横中央揃えする方法がわかる
- CSSGridを使って要素を縦横中央揃えする方法がわかる
それでは早速やっていきましょう。
横中央揃え
text-alignプロパティを用いる方法（インライン要素）
以下のようにparentクラスを付与したdiv要素内に子要素としてspanタグが３つ配置されているHTMLがあります。
<div class="parent"> <span class="child v1">child_1</span> <span class="child v2">child_2</span> <span class="child v3">child_3</span> </div>
spanタグをはじめとするインライン要素を左右方向に配置する場合、CSSのtext-alignプロパティを親要素に指定することでこれを実現することができます。
属性値にrightを与えると右揃え、leftを与えると左揃え、centerを与えると中央揃えとなります。
.parent { background-color: #075985; width: 100%; height: 500px; // 配下のインライン要素を中央揃え text-align: center; }
margin:0 auto;を用いる方法（ブロック要素）
次にブロック要素を左右方向にレイアウトする方法について。
シチュエーションとしては以下のように、parentクラスを付与したdiv要素内に、子要素としてchildクラスを付与したdiv要素が３つ配置されています。
<div class="parent"> <div class="child v1">child_1</div> <div class="child v2">child_2</div> <div class="child v3">child_3</div> </div>
divタグをはじめとするブロック要素を左右方向に対して配置する場合、各子要素に対してmargin: 0 auto; を指定することで実現することができます。
この際それぞれの子要素には横幅が指定されている必要があります。
.parent { background-color: #075985; width: 100%; height: 500px; } .child { // 横幅を指定 width: 100px; height: 100px; // ブロック要素を中央揃え margin: 0 auto; }
marginプロパティは与える属性値の数に応じて余白付与の対応が変化します。
以下はmarginプロパティに属性値を2つ〜4つ与えた場合のそれぞれの対応です。
.hoge { // 値が１つの場合は、上下左右が全て同じ値 margin:8px; → margin: 上下左右; // 値が２つの場合は、上下と左右の値 margin:10px 20px; → margin: 上下 左右; // 値が３つの場合は、上、左右、下、の値 margin:10px 20px 30px; → margin: 上 左右 下; // 値が４つの場合は、上、右、下、左、の値 margin:10px 20px 30px 40px; → margin: 上 右 下 左; }
このためmargin: 0 auto;という指定は、上下に0px, 左右をauto（親要素の横幅に対して子要素の横幅100pxが中央に来るようよしなに）に配置するという意味合いとなります。
縦横中央揃え
positionプロパティを用いる方法
ここからは上下方向も含めた中央揃えの方法について見ていきます。まずはpositionプロパティとtransformプロパティを用いて要素を縦横中央揃えする方法から。
シチュエーションとしては、parentクラスを付与したdiv要素内に子要素としてchildクラスを付与したdiv要素が1つ配置したHTMLを例に行なっていきます。
<div class="parent"> <div class="child">child</div> </div>
まず親要素であるparentにposition: relative;を指定。次に子要素にposition: absolute; を指定し、top 50%, left 50%を指定します。
.parent { background-color: #075985; width: 100%; height: 500px; position: relative; } .child { background-color: #f29221; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; }
この時点での要素の状態としてはこんな感じ。parentの左隅からみて、parentの上から50%, 左から50%の位置を始点に子要素を描画しています。
ここから更に子要素に対してtranslate -50%, -50% としてやることで子要素を親要素の中央に配置することができます。
.parent { background-color: #075985; width: 100%; height: 500px; position: relative; } .child { background-color: #f29221; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
tramslate関数はtransformプロパティ内で使用できる関数で、第一引数にX軸（横方向）、第二引数にY軸（縦方向）に対する移動値を指定できます。
上記のコードの場合、child要素それぞれの横幅の半分の幅分X軸とY軸方向にマイナス移動しています。
口頭だけだとわかりにくいのでそれぞれのプロパティと移動の対応についてガイドラインを引いたものが以下の通りです。
positionプロパティは属性値がたくさんあってややこしく感じがちですが、整理してみると然程難しくありませんし、場面や要素の種別を問わずに汎用的に配置を制御できるので覚えておくと何かと便利です。 このような配置方法も手札として持っておくことで、レイアウトのバリエーションも増えてくるものと思います。
CSSのpositionプロパティに関しては以下の動画でわかりやすく説明されているので、詳しく知りたい方はこちらもみてみるとより理解が深まるかもしれません。
Flexboxを用いる方法
次にFlexboxを用いて要素を縦横中央揃えしていく方法を見ていきます。
と言ってもここから先は正直あまり説明することがありません。というのもdisplayプロパティにflexかgridを指定してあとはちょろちょろっと2、3行書き加えてあげればそれで中央揃えが完了してしまうからです。
FlexもGridもちゃんと説明しようとすると、軸方向に関する説明やそれに伴うプロパティの読み替えなどなど説明することは尽きないのですが、あくまでこの記事で取り扱うのは中央揃えを行う方法に関する部分のみなので、細かい説明はまた筆が乗った時の自分に任せます。
HTMLは先ほどと同じものを使用します。
<div class="parent"> <div class="child">child</div> </div>
CSS側で使用するコードは以下の3行のみ。これを親要素に指定して終了です。
display: flex; justify-content: center; align-items: center;
.parent { background-color: #075985; width: 100%; height: 500px; // Flexboxの使用を宣言 display: flex; // 横方向に対して中央揃え justify-content: center; // 縦方向に対して中央揃え align-items: center; } .child { background-color: #f29221; width: 100px; height: 100px; }
複数要素でも同様に縦横中央寄せが可能です。
<div class="parent"> <div class="child v1">child_1</div> <div class="child v2">child_2</div> <div class="child v3">child_3</div> </div>
.parent { background-color: #075985; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; } .child { background-color: #f29221; width: 100px; height: 100px; } .child.v1 { background-color: #f29221; } .child.v2 { background-color: #f87171; } .child.v3 { background-color: #e879f9; }
なぜ子要素 (flexアイテム)が横並びなっているかについてですが、これは親要素(flexコンテナ)にdisplay: flex;を指定した際に、デフォルトでflex-direction: row;というプロパティが当たっているためです。
これはflexアイテムの並び方向を制御するプロパティで、rowは横並び、columnを指定すると縦並びにそれぞれ子要素の並び方向が変化します。このほかにもFlexboxには並び順や配置方法、要素間隔を制御する専用のプロパティがいくつもあるのですが、この場ではこれらの詳細な説明については割愛いたします。
気になる方は以下のドキュメントをご確認ください。
CSS Gridを用いる方法
最後にCSS Gridを用いて要素を縦横中央揃えする方法について確認していきます。
HTMLは先ほどと同じものを使用します。
<div class="parent"> <div class="child">child</div> </div>
.parent { background-color: #075985; width: 100%; height: 500px; display: grid; place-items: center; }
終わりです。2行。
display: grid; place-items: center;
親要素にたったこの2行を指定して終わり。圧倒的コスパ。流石に心許ないので補足で説明すると、まず1行目のdisplay: grid;はflex同様Gridの使用を宣言するものです。この親要素の配下でGridを使用しますという意味となります。
次にplace-itemsプロパティについて。こちらは本来2つの属性値を取るプロパティで、それぞれがFlexboxで言うところの'align-items'プロパティ(縦移動)とjustify-contentプロパティ(横移動)に対応しています。
ちなみにFlexboxとGridではtop, bottom, right, leftはそれぞれstart, endで表現されます。
place-items: <align-items>, <justify-content>; .parent { display: grid; // 縦：上寄せ、横：右寄せ place-items: start, end; // 縦：中央寄せ、横：左寄せ place-items: center, start; // 縦：下寄せ、横：中央寄せ place-items: end, center; // 縦：中央寄せ、横：中央寄せ place-items: center, center; // 上記を省略した書き方 place-items: center; }
まとめ
インライン要素を横中央揃えしたい
ラッパーの親要素に対して text-align: center; を指定
ブロック要素を横中央揃えしたい
各要素に横幅を指定した上で、margin: 0 auto;を指定
positionプロパティとtranslate関数で縦横中央寄せしたい
- 親要素にposition: relative;を指定
- 子要素にposition: absolute;を指定してtop, leftプロパティをそれぞれ50%にする
- 子要素にtranslete関数を指定して第一、第二引数にそれぞれ-50%を与える
Flexboxで縦横中央寄せしたい
親要素に以下を指定
.parent { display: flex; justify-content: center; align-items: center; }
CSS Gridで縦横中央寄せしたい
親要素に以下を指定
.parent { display: grid; place-items: center; }
