あまりCSSを触る機会が無いので忘れないようにメモ。CSSで要素をセンタリングする方法です。

いろいろな方法がありますが、CSS3で追加されたFlexboxを使うと簡単に実現できました。縦方向のセンタリングも簡単に実現できます。

下記の画像のように要素をページの中央に表示します。

こちらにページを公開しています。

HTML

<main>要素が<div>要素を１つ持つ何の変哲もないHTMLです。

id:boxのdiv要素をCSSで画面中央に配置します。

CSS

1 〜  5行目で、html, body, main要素全ての高さを100%にしています。これはbox要素を、画面の中央に表示する為に行っている定義です。

11 〜 15行目で、id:boxの要素のサイズ、色を定義しています。

6 〜 10行目で、内包する要素を縦横の中央に表示するよう定義しています。

display属性にflexを設定する点が肝です。これを使えば、要素を縦に並べたり、横に並べたりといったレイアウトが簡単に実現できます。要素の順序の入れ替えもCSSで定義できます。今後、レイアウトを行う際のスタンダードとなる技術ではないでしょうか。

justify-content属性にcenterを設定すれば、横方向のセンタリング、align-items属性に centerを設定すれば、縦方向のセンタリングとなります。

おしまい

とても簡単ですね。flex属性値が存在しない時代、縦方向のセンタリングがなかなか実現できず、とても苦労した覚えがあります。そんな苦労とは、これでもう無縁になりそうです。