display: flexで要素をセンタリング

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

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

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

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

HTML

<!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

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を設定すれば、縦方向のセンタリングとなります。