[CSS] 要素配置のセンタリング技

2023年10月2日

CSS

eyecatch ホームページを作っている時に、なかなか厄介なセンタリングの技は、いくつか存在します。 横センタリングと縦センタリングは、CSSでは全く考え方を変えなければイケない場合もあるんですよね。 テキストと画像、その他の要素など、それぞれタイプの違うモノをセンタリングさせる時など、一体どうやればいいのか分からないという人のために、そのパターンを解説してみたいと思います。

単純な縦と横のセンタリング

text-align

サンプルです。
<div class='sample-1'> サンプルです。<br> <div class='box'></div> </div> <style> .sample-1{ text-align:center; border:1px solid black; padding:10px; } .sample-1 .box{ width:50px; height:50px; background-color:red; } </style> 最も簡易なセンタリングの、text-align、文字通り、テキストの寄せ方向の指定ですが、テキストというよりもinline系の要素に対して有効なので、divなどのblock要素に対しては適用されません。 適用範囲としては、display:inline-blockや、画像タグなどです。

verticle-align

A B C
<table class='sample-2'> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <style> .sample-2{ height:80px; border-collapse:separate; } .sample-2 tr td{ border:1px solid black; padding:10px; width:80px; text-align:center; } .sample-2 tr td:nth-of-type(1){ vertical-align:top; } .sample-2 tr td:nth-of-type(2){ vertical-align:middle; } .sample-2 tr td:nth-of-type(3){ vertical-align:bottom; } </style> 縦の寄せをコントロールできるっぽいネーミングですが、この命令はTableタグのセルに対してしか有効になりません。 通常のブロック要素に適用しても効かないので、次のようにやっているケースも良く見かけます。
通常
display:table-cell
<div class='sample-3'> <div class='block'>通常</div> <div class='cell'>display:table-cell</div> </div> <style> .sample-3{ display:table; border-collapse:separate; } .sample-3 .block, .sample-3 .cell{ border:1px solid black; width:120px; height:100px; text-align:center; vertical-align:middle; } .sample-3 .block{ display:inline-block; } .sample-3 .cell{ display:table-cell; } </style> この、display:table-cellにセットする場合、いくつか使いづらいポイントがあります。
1. 親要素に、display:tableがセットされていないとセルとして機能しない。 2. 兄弟要素もセル要素にしないと表示コントロールが調節しずらい。

Flexを使ったセンタリング

単一の要素の中であれば、比較的かんたんに縦横のセンタリングが実装できます。
  • A
  • B
  • C
サンプルでは、2番めの要素に対して、縦横センタリングを適用しています。 センタリングさせたい要素に対して、上記赤色のように、flexの設定と、align-items(横)、justify-content(縦)の設定を加えてあげるだけでセンタリングさせることができます。 flexの中にflexを書くことも可能なので、メニュー項目などの場合に使うことができる技です。 ただし、内包する要素が複数ある場合、思った通りのセットが出来ない場合があるので、うまくコントロール出来ない場合は、別の方法で試してみましょう。

Transformを使ったセンタリング

もっとも扱いやすいのが、transformを使ったセンタリングでしょう。 これは、特定の要素の塊を好きな要素の中心に配置することが可能になります。
表示したい
内容
<div class='sample-5'> <div>表示したい<br>内容</div> </div> <style> .sample-5{ width:300px; height:300px; border:1px solid black; position:relative; } .sample-5 > div{ padding:10px; border:1px solid red; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style> 中心に置きたい親要素に、position:relative;をセットして、 中心配置したい要素に、position:absolute;をセットすると土台の完成です。 あとは、
top:50%; left:50%; transform:translate(-50%,-50%);
この命令で、横、縦を50%移動して、要素の表示サイズ分、-50%ずらしてくれます。 これが便利なのは、要素のサイズが動的に変更しても対応してくれるというのが嬉しいポイントで、計算などは一切しなくてもいいので、非常に使いやすいです。

あとがき

HTMlコーディングが苦手という人は、こうした書き方の方法を複数知らない事で、実現不可能と思い込むのが原因みたいですね。 そもそもの、DOM構造も重要ですが、ピンポイントでの適用するスタイルシートでの対応も、パズルゲームのように考えると、不思議と何でもできてしまうもの何ですよね。 こんなゲームみたいなコーディングって、面白くないですか?