あまりCSSを触る機会が無いので忘れないようにメモ。CSSで要素をセンタリングする方法です。
いろいろな方法がありますが、CSS3で追加されたFlexboxを使うと簡単に実現できました。縦方向のセンタリングも簡単に実現できます。
下記の画像のように要素をページの中央に表示します。
こちらにページを公開しています。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <title>display: flexで要素をセンタリング</title> </head> <body> <main> <div id="box"></div> </main> </body> </html> |
<main>要素が<div>要素を１つ持つ何の変哲もないHTMLです。
id:boxのdiv要素をCSSで画面中央に配置します。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | html , html body , html body main { height: 100%; } main { display: flex; justify-content: center; align-items: center; } #box { width: 200px; height: 200px; background-color: #FF0000; } |
1 〜 5行目で、html, body, main要素全ての高さを100%にしています。これはbox要素を、画面の中央に表示する為に行っている定義です。
11 〜 15行目で、id:boxの要素のサイズ、色を定義しています。
6 〜 10行目で、内包する要素を縦横の中央に表示するよう定義しています。
display属性にflexを設定する点が肝です。これを使えば、要素を縦に並べたり、横に並べたりといったレイアウトが簡単に実現できます。要素の順序の入れ替えもCSSで定義できます。今後、レイアウトを行う際のスタンダードとなる技術ではないでしょうか。
justify-content属性にcenterを設定すれば、横方向のセンタリング、align-items属性に centerを設定すれば、縦方向のセンタリングとなります。
おしまい
とても簡単ですね。flex属性値が存在しない時代、縦方向のセンタリングがなかなか実現できず、とても苦労した覚えがあります。そんな苦労とは、これでもう無縁になりそうです。
宮崎県在住。
プログラムを書いて暮らしています。趣味はルアーフィッシング、ギター。