【縦も横も】CSSでの中央寄せをまとめてみた【サンプルコード付き】

この記事では、CSSを用いて様々な中央寄せの方法を説明します。

Webページをコーディングしていく上で、中央寄せは頻繁に使うことになるでしょう。

対象がinlineなのかblockなのか、横方向だけ中央寄せができればいいのか縦横ともに中央寄せにしたいのかなど、必要となるパターンも様々です。

いろいろなパターンがまとまっているページが有ると便利そうなので、自分で作ってみました。

全部で8つあります。

すべてのパターンについてCodePenでサンプルコードをのせているので、みなさんもコピペで使ってみてください。

縦横中央寄せ

縦も横も中央寄せ出来る手法です。

汎用的に使える反面、ちょっと複雑なものが多いかもしれません。

5つのパターンがありますが、この中ではflexboxを使う方法が一番のおすすめです。

一番複雑なのですが、その代わり汎用性が非常に高く、対応できる場面も多いからです。

flexboxを使う

flexbox自体が複雑で、全てを説明するともう1記事できてしまうので、ここでは中央寄せに関する内容だけ取り扱います。

• 対象：block、inline-block、inline

まずはサンプルコードです。

See the Pen Centered 1 by gsg0222 (@gsg0222) on CodePen.

.flexboxにdisplay: flex;を指定して、Flexboxとして扱います。

横の中央寄せをするためにjustify-content: center;を、縦の中央寄せをするためにalign-items: center;を指定。

これで.innerは縦横中央寄せをされた状態になりました。

中に配置する.innerですが、display: block;以外のinline-block、inlineでもしっかり中央寄せになってくれます。（inlineだとwidthやheightの指定は効かないと思ったのですが、テストしたらしっかり大きさも指定できてしまいました。なんででしょう・・・。）

.flexboxの子要素を複数にする必要が出てくると、中央寄せとして使うのは難しくなってきます。

子要素をまとめるために一度divで囲ってしまうなどして、工夫する必要が出てくるでしょう。

inline-blockにpaddingを使う

縦横中央寄せですが、非常に単純なやり方です。

ただ、他の縦横中央寄せと違い応用範囲が狭いかもしれません。

• 対象：inline-block

See the Pen Centered 2 by gsg0222 (@gsg0222) on CodePen.

サンプルでは、文字列のみを持つinline-blockに、paddingを指定します。

上下、左右をそれぞれ同じ値にすると、中央寄せになるという方法です。

文字列の代わりに、inline-blockやinlineの要素を使うこともできます。

paddingをpxなど固定値で指定する代わりに、%など可変のものを使えば、レスポンシブなサイトでも使える場面があるかもしれません。

position: absolute;を使う

position: absolute;を使って縦横中央寄せをできます。

中央寄せに限らず、要素を自在に配置できるのが特徴です。

親要素がデフォルトのposition: static;だとposition: absolute;はちゃんと働かないので、注意が必要となります。

方法は2つです。

margin: auto;にしてtop、right、bottom、leftを0にする

中央寄せにしたい要素のwidthとheightを指定した上で、margin:auto;を指定し、top、right、bottom、leftを0とします。

その結果、上下左右のmarginは均等に配置されるので、要素は中央寄せとなります。

• 対象：block、inline-block

See the Pen Centered 4 by gsg0222 (@gsg0222) on CodePen.

以下のような注意点があります。

• 外側の要素（サンプルコードだと.outside）にposition: relative;を指定すること
• 中央寄せにしたい要素（サンプルコードだと.inner）にはwidthとheightを指定すること

rightとleftだけを0にすると横の中央寄せに、topとbottomだけを0にすると縦の中央寄せになります。

top:50%;とleft:50%を指定して、要素の半分だけ左上にずらす

top:50%;とleft:50%を指定して要素の起点を親要素の真ん中に持ってきた後、transform:translate(-50%, -50%);で要素の半分だけ左上にずらします。

そうすれば、結果として中央寄せとなるわけです。

• 対象：block、inline-block

See the Pen Centered 5 by gsg0222 (@gsg0222) on CodePen.

topとleftの値を変えていけば、かなり自由度の高い配置が出来るでしょう。

display:table-cell;を使う

中央寄せを目的に使うプロパティではないのですが、display:table-cell;でも中央寄せが可能です。

• 対象：inline-block

See the Pen Centered 6 by gsg0222 (@gsg0222) on CodePen.

中央寄せしたい対象をinline-blockにしないと、text-align: center;での横の中央寄せが有効になりません。

display:table-cell;を指定したことで、縦の中央寄せにvertical-align: middle;が使えるようになりました。

display:table-cell;は本来的にはdisplay:table;と組み合わせて使うプロパティなので、中央寄せのためだけに使うのはあまり勧められません。

一応紹介しましたが、他の方法の方が正しいCSSの使い方でしょう。

横の中央寄せ

横方向のみの中央寄せ方法です。

縦横を中央寄せするより、当然ですが簡単に実装できます。

2つ紹介していますが、どちらも必要なコードは1行だけです。

text-align: center;を使う

実は縦横中央寄せのサンプルコードでも出てきているプロパティです。

横の中央寄せでは最も使うのではないかと思います。

• 対象：block、inline-block

See the Pen Centered 7 by gsg0222 (@gsg0222) on CodePen.

このサンプルコードでは文字列を中央寄せしています。

.innerの子要素としてinlineやinline-blockの要素を使う場合も中央寄せしてくれます。

ただし、blockの要素は中央寄せしてくれません。

margin:0 auto;を使う

左右のmarginをautoにして中央寄せにする方法です。

• 対象：block

See the Pen Centered 8 by gsg0222 (@gsg0222) on CodePen.

注意点としては以下のものがあります。

• 中央寄せしたい要素はwidthを指定してある必要があること
• inline-blockではmargin:auto;が効かないため、この方法では中央寄せできないこと

ブロック要素を中央寄せしたい場合はこの方法と取ることになるでしょう。

縦の中央寄せ

縦の中央寄せだけに使える方法は1つだけです。

heightとline-heightを同じ値に指定する

文字列を縦に中央寄せするための方法です。

• 対象：block、inline-block

See the Pen Centered 9 by gsg0222 (@gsg0222) on CodePen.

注意点として以下のようなものがあります。

• heightとline-heightをpxなど固定値で指定する必要があること
• 文字列が改行してしまうと、表示が崩れてしまうこと

一見簡単なのですが、文字の改行に気を使う必要があるので、注意深く利用しないといけません。

中央揃えの引き出しを増やすべし

全部で8個サンプルコードをのせました。

どれを使うべきかは場合によって違いますが、引き出しは多く持っていて悪いことはありません。

こんな方法もあるんだなと記憶の片隅にでも覚えておくといいと思います。