開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSS:上下/左右への中央寄せ方法、徹底まとめ。

最終更新:2017-08-09 by Joe

CSSで、HTML要素を、縦横(上下左右)に中央寄せ(センタリング)する方法をまとめました。

実際の利用を踏まえて、しっかりめに解説していきます。

CSSでの中央寄せの基礎知識

CSSでの要素を中央寄せ配置を考える際に、HTML要素のdisplayプロパティが、どのように指定されているのか、知っておく必要があります。

displayプロパティが取りうる値は数多くありますが、代表的な値には、下記の2つがあります。

  • インライン(inline)
  • ブロック(block)

これらは、その要素や要素のコンテンツがどのように描画されるかを左右します。

それぞれのHTML要素(=タグ)の種類には、デフォルトで、inline, block, table, …など、なんらかの値が割り振られています。例えば、img要素、a要素、span要素はインライン、div要素、p要素はブロックがデフォルトです。必要に応じて、これらのデフォルト値を上書きするように、CSSからdisplay 値を設定する事もあるでしょう。

こちら、インラインとブロックの描画の違いです:

See the Pen inline and block elements by Joe (@akajoe) on CodePen.

インラインはテキストの文字が(左寄せであれば)左側に次々に流れ込むように表示されます。一方で、ブロックは横方向を満たすように広がり、直前の(または直後の)要素が流れ込む事を許しません。

また、ブロックレベルに指定されたHTML要素に、内包されたコンテンツであっても、テキストはすべて、インライン要素として振る舞います。つまり、ブロックレベルのタグで囲まれていないテキストは、どんどん流れ込みます。

この記事では、とりあえず「中央揃え」することが目的ですので、これらの違いについて、深追いする事はしませんが、ブロックとインラインの概念について、詳細な定義はW3c: CSS2.1 (Recommended)をご覧頂くのが詳しいです。

MDNは、プロパティ毎によくまとまっています。

テキストを上下左右に中央寄せする

テキストは横(左右)方向と縦(上下)方向の中央寄せを、分けて考えたほうが良いでしょう。

横(左右)方向のセンタリング

さて、テキスト、すなわち、インラインの要素の中央寄せするには、CSSプロパティ「 text-align:center」を利用します。

「text-align:center」を適応されたブロック要素は、その内包するインラインコンテンツを中央寄せにレイアウトします。

注意が必要なのは、センタリングしたいテキストの親となるブロック要素に対してこのプロパティを適応する必要がある点です。なぜなら、text-alignは、ブロック要素に対してのみ有効なプロパティだからです。

See the Pen Centered inline node by Joe (@akajoe) on CodePen.

縦(上下)方向のセンタリング

line-heightを大きく取る(1行の場合のみ有効)

こちらの方法は直感的で、簡単です。テキストの1行の高さを指定するCSSプロパティ「line-height」を利用します。1行だとわかっているのであれば、最もシンプルで気軽に使えます。

See the Pen HTML v-center: oneline by Joe (@akajoe) on CodePen.

これが複数行になると、異常にぶ厚い2行が出来上がってしまうことは、想像がつくと思います・・。

vertical-align:middle で中央寄せ(inline-block)

テキストが複数行ある場合は、こちらがおすすめです。

こちらはすこしトリッキーですが、CSSの仕様をうまく利用しています。vertical-alignによって、インラインブロック要素を縦方向に中央寄せした後、そのコンテンツ要素でline-heightを再指定しています。対象の要素が「inline-block」と指定されている事とに注意して下さい。vertical-alignプロパティは、ブロック要素には無効だからです。

See the Pen vertically center (inline-block) by Joe (@akajoe) on CodePen.

この、縦方向のセンタリングに関しては、詳しくはこちらの記事で解説していますので、ぜひご覧ください。

vertical-align:middle で中央寄せ(table-cell)

こちらも原理的にはvertical-align:middleを利用する意味では、上記と同じですが、対象の要素に、「inline-block」でなく「table-cell」を利用します。

See the Pen vertically center (table) by Joe (@akajoe) on CodePen.

親要素にdisplay:tableとするのを忘れないようにして下さい。また、table要素は、width:autoにおける振る舞いが、ブロック要素と異なりますので、ご注意下さい。(上記はわざと100%として親要素の横幅を満たすようにしています。)

ブロック要素を上下左右に中央寄せする

ブロック要素はインライン要素に比べて、幾分シンプルに取り扱うことができます。下記、(1)以外は、すべて上下左右に同じ考え方を適応できます。

[1] マージン自動計算法

ブロック要素は、下記の記述で中央寄せできます。ポイントは「margin:0 auto」です。

See the Pen Centering of a block by Joe (@akajoe) on CodePen.

左右のmargin値が「auto」とすれば、左右の余白バランスを取るようにmarginが自動計算される仕様です。このとき、左右に偏りが生じないよう、marginが計算され、子ブロック要素が真ん中に来るようになります。

width 値の指定について
上記は「width:300px」と幅を指定していますが、これは、ブロック要素に対して「width:auto」が与えられた時は、「(その要素の左右の余白を埋めて)親要素を満たすようにぴったりの長さに」という仕様ですので、width:auto において「その要素を中央寄せする」という目的は、意味が通りません。親にピッタリの長さになっているので、センタリングしようがないからです。

その意味で、ブロック要素を親要素の内部でセンタリングできるよう、長さを「300px」と固定します。こうすれば要素の左右に余白ができますので、中央寄せする余地が生まれます。

[2] 絶対配置 + 自動マージン

上記は、横方向にのみ、センタリングしていますが、同じmarginの自動計算の仕様を利用して、position:absoluteを使うと、上下も左右にも中央寄せすることが可能です。

See the Pen Centering of a block(absolute) by Joe (@akajoe) on CodePen.

ご覧のように、上記と同じく「margin:auto」の振る舞いで、対象方向のバランスを取るようにマージンが計算されます。

絶対配置の要素が、自分の座標の基準値を見つけられるよう、これの親要素のpositionを、relative, absolute, fixed など、initial以外の値となるようにして下さい。また、親要素の高さを明示的に固定してやる必要があります。

なお、親や対象要素のアクペクト比(縦横比)を固定したい時は、このような方法もあります。

[4] 絶対配置 + calc関数

最後は、まだそれほど一般化はしていませんが、calc関数を使った方法です。

See the Pen Centering an image(calc) by Joe (@akajoe) on CodePen.

基本的にcalc関数を用いれば、いままで難しかったレイアウトの多くが容易に実現できるようになります。ただし、対象要素の大きさを固定してやる必要があります。

なお、calc関数は、現在ではほとんどのブラウザでサポートされています。これは便利ですね。

上記によると、IE9以降でないとサポートがないようです。

ただ、果たして、IE8のようなユーザを対象としたウェブサイトかどうか・・・というところは考えてみてもよいでしょう。

[5] 絶対配置 + transform

「transform:translate」によって、対象要素の表示をずらす事ができます。その要素の50%ずらす、という指定が可能ですので、この特性をうまく利用します。transformで入力する%値は、自身に相対的に計算されますので、必ず「自分の50%」と指定できるので便利です。

See the Pen Centering an image(transform) by Joe (@akajoe) on CodePen.

ただし、transform プロパティは、IE10以降のサポートとなります・・・。これよりは上記のcalc関数の方が、サポート範囲が広いでしょうか。

[6] flexbox を利用

こちらはグリッドレイアウトで重宝するFlexboxを利用した方法です。本来は、複数の要素をグリッド状に並べるためのものですが、1つだけの要素にも適応できます。

See the Pen Centering of a block(flex) by Joe (@akajoe) on CodePen.

FlexboxもIE10以降のサポートとなります。

Flexboxのプロパティに関しては、こちらで網羅的に解説していますので、興味のある方はぜひご覧ください:

画像の中央寄せ

純粋に、画像を中央に配置するのは、すこし観点が変わります。

[1] background プロパティで、中央寄せ

backgroundプロパティには、中央寄せに便利な設定が揃っています。コードをシンプルにするため、進んで利用すべきでしょう。

こちらがサンプルです。要素containerの背景として直接画像を指定しています。

See the Pen Centering an image(bg) by Joe (@akajoe) on CodePen.

蛇足ですが、background-sizeにおける「cover」「contain」という値は、それぞれ、拡大縮小と、クロッピング(切り落とし)を自動で行ってくれます。

  • cover: フレームの隙間をすべて満たす用に拡大して、切り落とし
  • contain: フレーム内にちょうど収まるように拡大

背景画像の中央寄せ

[2] img要素とobject-fitプロパティを利用

こちらも上記のbackground-imageとほぼ同様の事を、HTMLのIMG要素を使ってできます。ですが、ブラウザのサポートが、IE11ならびに、Edgeでもサポートされていません。

こちらはあまりおすすめできませんので、解説はスキップします。

IMGタグとSEO効果

SEO上、IMGタグのalt属性にテキストを詰めるメリットが議論されますが、多くの場合は、画像の周りに画像を説明するテキストを記載したり、またその画像を含むセクションの見出しがその役割を担うことが多いです。無理してまで、alt属性を用いる必要はないはずです。

まとめ

中央揃えの方法は、いったん覚えてしまえばどれもそれほど難しいものでは無いと思います。

一方で、CSSのプロパティの正しい把握をしようとすると、いろいろと知っておくことが多いのは事実です。CSSの仕様について厳密な知識を持っている事が、実用上それほど影響を及ぼすことが少ないのは事実ですが、スキルレベルアップの目的で学習を進めるのもよいでしょう。

CSSはCSS2.1 およびCSS3(Working draft。モジュール単位で追加)が最新です。すべて英語なので、苦手な方は少しむずかしいかもしれませんが、すべてのCSS仕様の原典となっています。

また、上記でも紹介しましたが、「縦方向センタリング」はこちらの別記事にもう少しだけ詳しく書いています。

以上、CSSによる、要素の中央寄せ(センタリング)の方法でした。